/*
 * base theme
 *
 * todo: make per-client themes, this can be stored in localStorage
 */

:root {
    --text-color-light: rgb(20% 20% 20%);
    --text-color-60-light: rgb(60% 66% 60% / 1);
    --text-color-bright-light: rgb(100% 100% 100% / 1);
    --text-color-brighter-light: rgb(30% 30% 30% / 1);
    --text-color-medium-light: rgb(45% 45% 45% / 1);
    --text-color-demur-light: rgb(90% 90% 90% / 1);
    --icon-color-light: rgb(93% 93% 93%);
    --base-background-color-light: rgb(100% 100% 100% / 1);
    --base-background-color-demur-light: rgb(96% 99% 96% / 1);
    --inset-background-color-light: rgb(93% 93% 93% / .7);
    --article-background-color-light: rgb(90% 90% 90% / .95);
    --section-background-color-light: rgb(100% 100% 100% / .9);
    --section-border-light: 1px solid rgb(70% 70% 70% / 1);
    --section-box-shadow-light: 0 0 3px 2px rgb(85% 85% 85% / 1);
    --section-title-background-color-light: rgb(39% 55% 60% / 1);
    --section-title-darker-background-color-light: rgb(20% 40% 50% / 1);
    --section-title-vdark-background-color-light: rgb(17% 37% 47% / 1);
    --section-title-box-shadow-light: rgb(60% 65% 60% / 1);
    --section-fieldset-background-color-light: rgb(92% 94% 92% / 1);
    --border-color-bright-white-light: rgb(93% 93% 93% / 1);
    --div-fieldwrapper-light: rgb(92% 94% 92% / 1);
    --div-fieldwrapper-box-shadow-light: 0 0 2px 0.25px rgb(88% 88% 88% / 1);
    --text-color-strong-light: rgb(0% 0% 0% / 1);
    --item-border-light: 1px solid rgb(78% 78% 78% / .8);
    --grid-background-hilite-light: rgb(80% 82% 80% / 1);
    --button-green-color-light: rgb(100% 100% 100% / 1);
    --button-green-background-color-light: rgb(0% 69% 23% / 1);
    --button-background-color-light: rgb(39% 65% 66% / 1);
    --button-dangerous-background-color-light: rgb(100% 0% 0% / 1);
    --button-dangerous-border-color-light: rgb(50% 0% 0% / 1);
    --button-dangerous-shadow-light: rgb(60% 0% 0% / 1);
    --button-shadow-light: rgb(19% 45% 46% / 1);
    --button-border-light: 1px solid rgb(19% 39% 36% / 1);
    --input-box-shadow-light: 0 0 2px 2px rgb(0% 0% 0% / .9);
    --input-box-border-light: 1px solid rgb(100% 100% 100% / .9);
    --help-box-color-light: rgb(60% 79% 100% / 1);
    --help-box-background-color-light: rgb(21% 35% 50% / 1);
    --input-needed-box-shadow-light: 0 0 9px 3px rgb(60% 30% 0% / 1);
    --fieldset-legend-background-color-light: rgb(66% 70% 62% / 1);
    --fieldset-border-light: 1px solid rgb(78% 78% 78% / .8);
    --footer-background-color-light: rgb(21% 35% 50% / .3);

    /* dark mode */
    --text-color-dark: rgb(90% 90% 90%);
    --text-color-60-dark: rgb(60% 66% 60% / 1);
    --text-color-bright-dark: rgb(85% 85% 85% / 1);
    --text-color-brighter-dark: rgb(80% 80% 80% / 1);
    --text-color-medium-dark: rgb(55% 55% 55% / 1);
    --text-color-demur-dark: rgb(30% 30% 30% / 1);
    --icon-color-dark: rgb(69% 69% 69%);
    --base-background-color-dark: rgb(20% 20% 20%);
    --base-background-color-demur-dark: rgb(25% 25% 25%);
    --inset-background-color-dark: rgb(60% 60% 60% / .8);
    --article-background-color-dark: rgb(40% 40% 40% / .95);
    --section-background-color-dark: rgb(50% 50% 50% / .9);
    --section-border-dark: 1px solid rgb(30% 30% 30% / 1);
    --section-box-shadow-dark: 0 0 3px 2px rgb(35% 35% 35% / 1);
    --section-title-background-color-dark: rgb(19% 35% 36% / 1);
    --section-title-darker-background-color-dark: rgb(10% 20% 25% / 1);
    --section-title-vdark-background-color-dark: rgb(8% 18% 23% / 1);
    --section-title-box-shadow-dark: rgb(40% 45% 40% / 1);
    --section-fieldset-background-color-dark: rgb(45% 48% 45% / 1);
    --border-color-bright-white-dark: rgb(63% 63% 63% / 1);
    --div-fieldwrapper-dark: rgb(35% 38% 35% / 1);
    --div-fieldwrapper-box-shadow-dark: 0 0 2px 0.25px rgb(48% 48% 48% / 1);
    --text-color-strong-dark: rgb(100% 100% 100% / 1);
    --item-border-dark: 1px solid rgb(38% 38% 38% / .8);
    --grid-background-hilite-dark: rgb(35% 38% 35% / 1);
    --button-green-color-dark: rgb(100% 100% 100% / 1);
    --button-green-background-color-dark: rgb(0% 69% 23% / 1);
    --button-background-color-dark: rgb(40% 60% 50% / 1);
    --button-dangerous-background-color-dark: rgb(50% 0% 0% / 1);
    --button-dangerous-border-color-dark: rgb(25% 0% 0% / 1);
    --button-dangerous-shadow-dark: rgb(65% 0% 0% / 1);
    --button-border-dark: 1px solid rgb(46% 50% 42% / 1);
    --button-shadow-dark: rgb(50% 70% 60% / 1);
    --input-box-shadow-dark: 0 0 2px 2px rgb(90% 90% 90% / .9);
    --input-box-border-dark: 1px solid rgb(100% 100% 100% / .9);
    --input-needed-box-shadow-dark: 0 0 6px 2px rgb(90% 90% 90% / 1);
    --help-box-color-dark: rgb(100% 100% 100% / 1);
    --help-box-background-color-dark: rgb(21% 35% 50% / 1);
    --fieldset-legend-background-color-dark: rgb(36% 40% 32% / 1);
    --fieldset-border-dark: 1px solid rgb(28% 28% 28% / .8);
    --footer-background-color-dark: rgb(21% 35% 50% / .3);
}

[data-theme='light'] {
    --text-color: var(--text-color-light);
    --text-color-60: var(--text-color-60-light);
    --text-color-bright: var(--text-color-bright-light);
    --text-color-brighter: var(--text-color-brighter-light);
    --text-color-medium: var(--text-color-medium-light);
    --text-color-demur: var(--text-color-demur-light);
    --icon-color: var(--icon-color-light);
    --background-color: var(--base-background-color-light);
    --background-color-demur: var(--base-background-color-demur-light);
    --inset-background-color: var(--inset-background-color-light);
    --article-background-color: var(--article-background-color-light);
    --section-background-color: var(--section-background-color-light);
    --section-border: var(--section-border-light);
    --section-box-shadow: var(--section-box-shadow-light);
    --section-title-background-color: var(--section-title-background-color-light);
    --section-title-darker-background-color: var(--section-title-darker-background-color-light);
    --section-title-vdark-background-color: var(--section-title-vdark-background-color-light);
    --section-title-box-shadow: var(--section-title-box-shadow-light);
    --section-fieldset-background-color: var(--section-fieldset-background-color-light);
    --border-color-bright-white: var(--border-color-bright-white-light);

    --div-fieldwrapper: var(--div-fieldwrapper-light);
    --div-fieldwrapper-box-shadow: var(--div-fieldwrapper-box-shadow-light);
    --text-color-strong: var(--text-color-strong-light);
    --item-border: var(--item-border-light);
    --grid-background-hilite: var(--grid-background-hilite-light);
    --button-green-color: var(--button-green-color-light);
    --button-green-background-color: var(--button-green-background-color-light);
    --button-background-color: var(--button-background-color-light);
    --button-dangerous-background-color: var(--button-dangerous-background-color-light);
    --button-dangerous-border-color: var(--button-dangerous-border-color-light);
    --button-dangerous-shadow: var(--button-dangerous-shadow-light);
    --button-border: var(--button-border-light);
    --button-shadow: var(--button-shadow-light);
    --input-box-shadow: var(--input-box-shadow-light);
    --input-box-border: var(--input-box-border-light);
    --input-needed-box-shadow: var(--input-needed-box-shadow-light);
    --help-box-color: var(--help-box-color-light);
    --help-box-background-color: var(--help-box-background-color-light);
    --fieldset-legend-background-color: var(--fieldset-legend-background-color-light);
    --fieldset-border: var(--fieldset-border-light);
    --footer-background-color: var(--footer-background-color-light);
}

[data-theme='dark'] {
    --text-color: var(--text-color-dark);
    --text-color-60: var(--text-color-60-dark);
    --text-color-bright: var(--text-color-bright-dark);
    --text-color-brighter: var(--text-color-brighter-dark);
    --text-color-medium: var(--text-color-medium-dark);
    --text-color-demur: var(--text-color-demur-dark);
    --icon-color: var(--icon-color-dark);
    --background-color: var(--base-background-color-dark);
    --background-color-demur: var(--base-background-color-demur-dark);
    --inset-background-color: var(--inset-background-color-dark);
    --article-background-color: var(--article-background-color-dark);
    --section-background-color: var(--section-background-color-dark);
    --section-border: var(--section-border-dark);
    --section-box-shadow: var(--section-box-shadow-dark);
    --section-title-background-color: var(--section-title-background-color-dark);
    --section-title-darker-background-color: var(--section-title-darker-background-color-dark);
    --section-title-vdark-background-color: var(--section-title-vdark-background-color-dark);
    --section-title-box-shadow: var(--section-title-box-shadow-dark);
    --section-fieldset-background-color: var(--section-fieldset-background-color-dark);
    --border-color-bright-white: var(--border-color-bright-white-dark);
    --div-fieldwrapper: var(--div-fieldwrapper-dark);
    --div-fieldwrapper-box-shadow: var(--div-fieldwrapper-box-shadow-dark);
    --text-color-strong: var(--text-color-strong-dark);
    --item-border: var(--item-border-dark);
    --grid-background-hilite: var(--grid-background-hilite-dark);
    --button-green-color: var(--button-green-color-dark);
    --button-green-background-color: var(--button-green-background-color-dark);
    --button-background-color: var(--button-background-color-dark);
    --button-dangerous-background-color: var(--button-dangerous-background-color-dark);
    --button-dangerous-border-color: var(--button-dangerous-border-color-dark);
    --button-dangerous-shadow: var(--button-dangerous-shadow-dark);
    --button-border: var(--button-border-dark);
    --button-shadow: var(--button-shadow-dark);
    --input-box-shadow: var(--input-box-shadow-dark);
    --input-box-border: var(--input-box-border-dark);
    --input-needed-box-shadow: var(--input-needed-box-shadow-dark);
    --help-box-color: var(--help-box-color-dark);
    --help-box-background-color: var(--help-box-background-color-dark);
    --fieldset-legend-background-color: var(--fieldset-legend-background-color-dark);
    --fieldset-border: var(--fieldset-border-dark);
    --footer-background-color: var(--footer-background-color-dark);
    filter: brightness(60%);
}

:anchor-booting {
  --background-image: url(/static/images/top.jpg);
}

@view-transition {
    navigation: auto;
}
::view-transition-group(root) {
    animation-duration: .4s;
}
@keyframes move-out {
    from {
        opacity: 1.0;
    }

    to {
        opacity: 0.0;
    }
}

@keyframes move-in {
    from {
        opacity: 0.0;
    }

    to {
        opacity: 1.0;
    }
}

/* Apply the custom animation to the old and new page states */

::view-transition-old(root) {
    animation: .3s ease-in both move-out;
}

::view-transition-new(root) {
    animation: .3s ease-in both move-in;
}

/*@media screen and (prefers-color-scheme: dark) {
}*/

html {
  /*scrollbar-gutter: stable;*/
}

body {
    color: var(--text-color);
    background-color: var(--background-color);
    background-blend-mode: darken;
    background-repeat: no-repeat;
    background-image: url(/static/images/top.jpg);
    background-attachment: fixed;
    background-size: cover;
    background-position: 20%;
    font-family: 'Open Sans', 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    margin: 0;
  }

/*@font-face {
  font-family: 'entypo-fontello';
  font-weight: normal;
  font-style: normal;
  src: url('/static/fonts/entypo-fontello.eot') format('embedded-opentype'),
       url('/static/fonts/entypo-fontello.woff') format('woff'),
       url('/static/fonts/entypo-fontello.ttf') format('truetype'),
       url('/static/fonts/entypo-fontello.svg') format('svg');
}

#top .avia-font-entypo-fontello,
body .avia-font-entypo-fontello,
html body [data-av_iconfont='entypo-fontello']:before {
 font-family: 'entypo-fontello';
}
*/
footer#park-ranger-footer {
    position: fixed;
    bottom: 0;
    display: flex;
    justify-content: flex-end;
    z-index: 1000;
    width: 100vw;
    height: .5rem;
    font-size: .67rem;
    line-height: 1rem;
    color: var(--help-box-color);
}

footer#park-ranger-footer>span#park-ranger-footer-preblock {
    border-top: 1px solid rgb(10% 20% 30% / .5);
    background-color: var(--footer-background-color);
    flex-grow: 1;
}

footer#park-ranger-footer>span#park-ranger-footer-postblock {
    border-top: 1px solid rgb(10% 20% 30% / .5);
    background-color: var(--footer-background-color);
    width: 1.5rem;
    flex-shrink: 1;
}

footer#park-ranger-footer>span#park-ranger-footer-text {
    display: inline-block;
    border-top: 1px solid rgb(10% 15% 20% / .5);
    border-radius: .75rem;
    background-color: var(--footer-background-color);
    line-height: 1rem;
    height: 2rem;
    margin-top: -.5rem;
    padding: 0.125rem 0.5rem;
}

/*footer for AB */
footer#anchor-booting-footer {
  background-color: rgb(80% 80% 80% / 1);
  color: white;
  padding-bottom: 1rem;
}

/*##Device = Desktops
  ##Screen = 1281px to higher resolution desktops
*/

@media (min-width: 1281px) {
    .printable-tag {
        max-width:10cm;
        width:100%;
    }
}

/*##Device = Laptops, Desktops
  ##Screen = B/w 1025px to 1280px
*/

@media (min-width: 1025px) and (max-width: 1280px) {
    .printable-tag {
        max-width:10cm;
        width:100%;
    }
}

/*##Device = Tablets, Ipads (portrait)
  ##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) {
    .printable-tag {
        max-width:10cm;
        width:100%;
    }
}

/*##Device = Tablets, Ipads (landscape)
  ##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    .printable-tag {
        max-width:10cm;
        width:100%;
    }
}

/*
  ##Device = Low Resolution Tablets, Mobiles (Landscape)
  ##Screen = B/w 481px to 767px
*/

@media (min-width: 481px) and (max-width: 767px) {
    .printable-tag {
        max-width:10cm;
        width:100%;
    }
}

/*
  ##Device = Most of the Smartphones Mobiles (Portrait)
  ##Screen = B/w 320px to 479px
*/

@media (min-width: 320px) and (max-width: 480px) {
    .printable-tag {
        max-width:12cm;
        width:100%;
    }
}

p {
  overflow-wrap: anywhere;
}

/* fucking Safari. it's always Safari */
input {
    -webkit-user-select: text; /* Chrome, Opera, Safari */
    -moz-user-select: text; /* Firefox 2+ */
    -ms-user-select: text; /* IE 10+ */
    user-select: text; /* Standard syntax */
}

input,
select {
    padding: 1px 2px;
    box-sizing: border-box;
    color: var(--text-color);
    background-color: var(--background-color);
}

/* normal table */
table {
  table-layout: fixed;
  border-collapse: collapse;
}

table th { border-bottom: 2px solid black; padding: .125rem .5rem; }
table td {
  border: 1px solid gray;
  padding: .125rem .5rem;
  vertical-align:top;
  font-size:1rem;
}
table tr:nth-child(odd) { background-color: #fefefe; }
table tr:nth-child(even) { background-color: #e0e0e0; }

table td:last-child {
  border-bottom:1px solid gray;
}

/* add .REFLOW where needed :) */
@media only screen and (max-width: 600px)
 {
  table.reflow thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }

  table.reflow tr {
    border-bottom: 1px solid #d2d2d2;
    display: block;
    margin-bottom: 2rem;
  }

  table.reflow td {
    display: block;
    border-bottom:none;
    font-size: 1.2rem;
    text-align: right;
    font-weight:600;
  }

  table.reflow.community-info td {
    text-align: left;
  }

  table.reflow td::before {
    /*
    * aria-label has no advantage, it won't be read inside a table
    content: attr(aria-label);
    */
    content: attr(data-label);
    float:left;
    color:#c0c0a0;
    font-size:.5rem;
  }
}

span.bright-veh-tag {
  color:white;
  background-color:black;
  font-weight:900;
  font-size:1.5rem;
}

li {
    margin: .125rem;
    padding: 0.25rem;
    border-radius: .35rem;
}

div.block-wrapper {
    margin-top:84px;
    position: relative;
}

table.community-info caption {
  text-align: left;
}

table.community-info span.premise-address,
table.community-info span.violation-reason {
  display: block;
  margin: .125rem;
  padding:0;
  line-height:1rem;
  border-radius:.25rem;border:1px solid #afafaf;
}

fieldset {
  margin: 1.5rem 0 0 0;
  padding-inline: 0.25rem;
  padding-block: 0.5rem;
  border: var(--fieldset-border);
  border-radius: .5rem;
  position: relative;
  width: calc(100% - .6rem);
  background-color: var(--section-fieldset-background-color);
}

legend {
  width: calc(100% - .75rem - 4px);
  position: absolute;
  top: -1.25rem;
  left: 0;
  padding: 0 0.5rem;
  border-top-left-radius: .75rem;
  border-top-right-radius: .75rem;
  background-color: var(--section-title-background-color);
  color: var(--text-color-bright);
}

fieldset>div.fieldWrapper {
  border: none;
  border-radius: 0;
  background-color: unset;
  box-shadow: none;
  width: 100%;
}

div.fieldWrapper,
div.innerFieldWrapper {
/*  padding: .25rem;*/
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  align-items: flex-start;
}

div.fieldWrapper {
  transform: scale(1);
  margin-bottom: .5rem;
  /* width: calc(100% - .5rem); /* why do i keep switching these? */

  /* for width:100, this makes the div inside section line up side to side evenly */
  width: 100%;
  border-radius: .25rem;
  border-bottom: 1px solid #a8a8a8;
  background-color: var(--div-fieldwrapper);
  box-shadow: var(--div-fieldwrapper-box-shadow);
}

div.fieldWrapper:last-of-type {
  margin-bottom:auto;
}

div.fieldWrapper label {
  font-family: Roboto, "Noto Sans", Arial, sans-serif;
/*  font-size: 1.125rem;*/
  line-height: 1.125rem;
  margin:0 4px 5px;
  word-wrap:break-word;
  width: 5rem;
  flex-grow: 0;
  flex-shrink: 0;
  vertical-align:top;
  float:none;
  position: relative;
  color: var(--text-color);
  border-right: var(--item-border);
}

div.fieldWrapper label.no-border {
  border: unset;
}

div.layout-column {
  flex-direction: column;
  font-style: italic;
}

div.fieldWrapper label.wordy {
  width: inherit;
  align-self: flex-start;
  border-right: unset;
  margin-inline-end: 0;
}

div.fieldWrapper > div,
div.innerFieldWrapper > div {
  display: flex;
  flex-grow: 1;
  align-items: center;
  position: relative;
  width: 100%;
}

div.fieldWrapper >div >div {
  display: flex;
  flex-grow: 1;
  position: relative;
  width: 100%;
}

p,
button {
    opacity: 1;
    transition: opacity 300ms;
    place-content: center;
}

p[disabled],
button[disabled] {
  opacity: .2;
}

button.activated {
    border-radius: 50%;
    box-shadow: unset;
    aspect-ratio: 1/1;
    animation: rotating 1s linear infinite;
}
@keyframes rotating {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

button {
    color: var(--button-green-color);
    background-color: var(--button-background-color);
    border: var(--button-border);
    border-radius:.5rem;
    padding: .1rem .2rem;
    max-width: fit-content;
    box-shadow: inset -2px -2px 4px 1px var(--button-shadow);
    transition: border-radius 1000ms, box-shadow 1000ms, height 1000ms
}

div.wrapper button.please-wait {
    display: grid;
    place-content: center;
    position: absolute;
    content: 'gps⏳';
    z-index: 3;
    font-size: 2rem;
    right: 0rem;
    bottom: -0.5rem;
    height: 0.5rem;
    width: 2.5rem;
    border: 3px solid red;
    border-radius: 50%;
    background-color: rgb(100% 0% 0% / .5);
    filter: drop-shadow(2px 4px 4px black);
}

button.dangerous {
    background-color: var(--button-dangerous-background-color);
    border-color: var(--button-dangerous-border-color);
    box-shadow: inset -2px -2px 4px 1px var(--button-dangerous-shadow);
}

div.fieldWrapper textarea,
div.fieldWrapper select,
div.fieldWrapper output,
div.fieldWrapper input,
div.fieldWrapper dl {
  flex-grow: 1;
  /*max-width: min(90vw, 20rem);*/
  margin: 3px;
  border-radius: .25rem;
  font-size: 1.125rem;
/*  padding: 1px 2px;*/
  border: 1px solid rgba(200,200,200,.8);
}

select[data-input-needed]:not([disabled]),
input[data-input-needed]:not([disabled]),
div[data-input-needed],
ul[data-input-needed] {
  box-shadow: var(--input-needed-box-shadow) !important;
}

select[data-input-needed]:not([disabled]),
input[data-input-needed]:not([disabled]) {
    background-image: radial-gradient(red 45%, transparent 56%);
    background-size: 1rem 1rem;
    background-repeat: no-repeat;
    background-position-y: center;
    background-position-x: calc(100% + .5rem);
}

input[disabled],
output[disabled],
select[disabled] {
    background: repeating-linear-gradient(-45deg, var(--text-color-demur), var(--text-color-demur) 2px, var(--background-color) 5px, var(--background-color) 20px);
}

p.api-error {
    opacity: 1;
    background: repeating-linear-gradient(-45deg, #fcc, #fcc 2px, #fafafa 5px, #fafafa 20px);
    color: black;
}

p.api-error::after {
    content: '⚠️';
    position: absolute;
    right: 0;
    top: 0;
}

p.google-error {
  display: none;
  color: white;
  background-color: red;
}

div.fieldWrapper dl {
  border: none;
}

div.fieldWrapper input,
div.fieldWrapper select,
div.fieldWrapper textarea {
  width: 100%;
}

div.fieldWrapper input[type="checkbox"] {
  width:auto;
}

div>input[type="text"].other-input {
  display:none;
  text-indent:3.5rem;
}

div.fieldWrapper option {
  font-size:1rem;
}

div.fieldWrapper option[disabled] {
  color: #ccc;
}

div.fieldWrapper select optgroup {
  font-style: italic;
  font-weight: 900;
  text-align: center;
  color: var(--text-color-60);
}

div>label.other-input-label {
  display:none;
  position:absolute;
  left:0;
  width:3rem;
  font-size: x-small;
  font-style:italic;
  color: var(--text-color-brighter);
  background-color: var(--inset-background-color);
  border:1px dashed #aaa;
  border-radius:.25rem;
  text-align:center;
}

/*@media (max-width: 500px) {
  div.fieldWrapper>label {
    width:100%;
  }
  div.fieldWrapper>div {
    width:100%;
  }
  div.fieldWrapper select,
  div.fieldWrapper input {
    width:45vw;
  }
}

*/div.fieldWrapper label[disabled] {
  opacity: 0.3;
}

div.fieldWrapper p.help {
    font-style:italic;
    font-size:small;
    line-height:.8rem;
    margin:0;
    color: var(--text-color-brighter);
}

div.fieldWrapper select:invalid {
    color:#777;
    opacity:1;
    height:2rem;
    padding:.5rem 0 0 0;
}

div.fieldWrapper input::placeholder,
div.fieldWrapper select:invalid {
  font-size:0.6rem;
}

div.fieldWrapper datalist >option {
  font-size:xx-small;
  padding:0;
  display:inline-block;
  width:.5rem;
}

div.fieldWrapper p.error-help {
  margin:.25rem;
  padding:.25rem;
  border:1px solid gray;
  border-radius:1rem;
  background-color:#f0f0f0;
  color:#800000;
  box-shadow: 0px 0 2px 1px red;
  display:none;
}
div.fieldWrapper p.error-help span.i {
  font-style:italic;
  display:block;
}

div.fieldWrapper p.error-help.show {
  display:block;
}

input#fucking-safari-visit_duration_max,
select#fucking-safari-visit_duration {
  display:none;
}

article {
    background-color: var(--article-background-color);
    border-radius: .25rem;
    border: 1px solid rgba(180, 180, 180, .5);
    /*  box-shadow: 2px 2px 6px 0px gray;*/
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    margin-block: 1rem;
    margin-inline: auto;
    width: 90vw;
    max-width: 44rem;
    min-width: 384px;
    overflow: hidden;
    /*  padding: .5rem;*/
    position: relative;
}

/* preload that prevents user from interacting with page */
article#preload-cover {
  display: block;
  position: fixed;
  top: 3.5rem;
  bottom: 0;
  left: 0;
  right: 17px;
  width: calc(100vw - 3rem);
  margin-block: unset;
  z-index: 90;
  font-size: 1.5rem;
  padding: 1rem;
  box-sizing: border-box;
  transition: transform .5s ease-in-out;
  transform: scaleX(1);
  transform-origin: 50%;
}

article#preload-cover.fade {
  transform: scalex(0);
}

article#preload-cover.hidden {
  display: none;
}

article > form {
  display:flex;
  flex-direction:column;
}

article > form,
article > div {
/*  align-self: flex-end;*/
  z-index: 2;
}

article > form {
  width: 100%;
  transition: margin-top .5s ease-in-out;
}

article > form > p {
  margin: 0;
  margin-bottom:1rem;
  font-weight:900;
}

article {
    &>form {
        &>details {
            &>summary {
                &>p {
                    margin: 0 0 0 1rem;
                }
            }
        }
    }
}

@media screen and (max-width: 400px) {
  div.wrapper>article {
    width: 96vw;
    min-width: calc(100% - 10px);
    margin-inline: 0;
    border: unset;
  }
}

/*@media screen and (min-width: 768px) {*/
/*  div.wrapper>article {*/
/*    width: 44rem;*/
/*  }*/
/*}*/

section {
  width: calc(100% - .5rem);
  margin: 4rem auto .75rem auto;
  padding: .25rem 0;
}

section.av_textblock_section > *{
  margin: 0;
  padding: 0;
  border-radius: .25rem;
  background-color: var(--section-background-color);
  border: var(--section-border);
  box-shadow: var(--section-box-shadow);
}

section.av_textblock_section > div > p {
  margin: 0;
  padding: 0;
}

section > p,
fieldset > p,
section details > summary > p {
  font-style: italic;
  font-variant-caps: petite-caps;
  margin:.25rem .25rem;
  border-radius: .25rem;
  box-shadow: var(--section-title-box-shadow);
  padding: .5rem;
  font-size: large;
  font-weight: 900;
  position: relative;
  background-color: var(--section-title-darker-background-color);
  color: var(--text-color-bright);
}

section details > summary > p:first-child {
    display: inline-block;
    position: relative;
    top: unset;
    left: unset;
    width: calc(100% - 1rem);
    margin: 0;
}


/*details>summary>p:first-child {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(100% - 2rem);
}
*/
details>summary>div.fieldWrapper:nth-of-type(1) {
  margin-top: .5rem;
}

div.wrapper.slidehidden {
  max-height:0px;
  transition: max-height 1.0s ease;
}

div.wrapper {
  position:relative;
/*  max-width:900px;*/
  transition: max-height 1.0s ease;
  overflow:hidden;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: center;
}

div.wrapper:first-of-type {
  margin-block-start: 3rem;
}

article.flyout-parking-permit object {
  /*position:absolute;*/
  margin:auto;
}

button {
  margin:.1rem;
  border-radius:.5rem;
}

#permanent-error-box {
  position: fixed;
  top: 5rem;
  left: 3rem;
  right: 3rem;
  margin: 0 auto;
  padding: .1rem;
  font-weight: 900;
  color: rgb(50% 0% 0% / .95);
  border: 3px solid rgb(50% 0% 0% / .5);
  border-radius: .5rem;
  background-color: rgb(60% 60% 60% / .95);
  z-index: 999;
}

.fieldWrapper button.close-other-input,
#permanent-error-box-close {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 2rem;
    width: 2rem;
    max-width: unset;
    margin: 0;
    padding: 0;
    right: -0.5rem;
    font-size: 2rem;
    border-radius: 50%;
    font-weight: 900;
}

div.fieldWrapper button.close-other-input {
    display: none;
    top: 0;
    right: .1rem;
    align-items: center;
    justify-content: center;
    padding-bottom: 0.3rem;
}

#permanent-error-box-close {
    background-color: rgb(90% 90% 90% / 1);
    filter: drop-shadow(0px 0px 4px white);
}

#permanent-error-box ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

#permanent-error-box li {
    margin: 0.1rem;
    padding: 0 0.2rem;
    background-color: rgb(50% 0% 0% / .2);
}

#network-status {
  width: 96px;
  height: 96px;
  position: fixed;
  top: 2px;
  right: 2px;
  z-index: 1004;
  transform-origin: center;
  animation: kf-network-status 1.2s infinite ease-in-out;
}

@keyframes kf-network-status {
  0%, 80%, 100% {
    -webkit-transform: scale(.9,.9);
            transform: scale(.9,.9);
  } 40% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

button#report-webpage-bug {
    border: 1px dashed #666;
    width: 2.25rem;
    height: 2.25rem; /* fucking safari doesn't support aspect-ratio */
    border-radius: 50%;
    color: var(--text-color);
    background-color: rgba(255,255,255,.7);
    position: fixed;
    top: 0;
    right: 76px;
    z-index: 1002;
    box-shadow: unset;
    padding: 0;
    -webkit-transform: translateZ(0); /* safari bug, position:fixed doesn't work without this */
    transform: translate(0);
    font-size: .5rem;
}

/*@media screen and (max-width: 782px) {
  button#report-webpage-bug {
    top: 64px; /* 46px +2
  }
}
*/
div.fetch_activity_wrapper {
  position: fixed;
  height: 0;
  top: 72px;
  right: 48px;
  width: min(80vw, 32rem);
  z-index: 1001;
}
div.fetch_activity_wrapper.dungeon {
  z-index: -1;
}

div#fetch_activity {
  width: 100%;
  opacity: 0;
  border:2px solid #64a7aa;
  border-radius: .5rem;
  box-shadow:5px 5px 10px 3px;
  background-color: rgba(248,248,248,.9);
  display: grid;
  grid-template-columns: 4fr 0fr;
  grid-template-rows: 1fr;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  transition: all .6s;
  transform-origin: center;
}

div#fetch_activity.expanded {
  opacity: 1;
}

div#fetch_activity >dl {
  grid-area: 1/1/2/2;
  margin-bottom: 0;
  padding: .25rem;
  font-size: .83rem;
}

div#fetch_activity dt,
div#fetch_activity dd {
  opacity: 1;
  overflow-y: hidden;
  transform: scaleY(1);
  min-height: 1px;
  max-height: 2rem;
  transform-origin: top;
  color: rgb(28 93 95);
  background-color: rgba(235,235,235,.95);
  transition: color .3s,
    opacity .3s .3s,
    transform .3s .6s,
    max-height .3s .7s;
}

div#fetch_activity >dl >dt {
  font-weight: bolder;
}

div#fetch_activity >dl >dt:not(:first-of-type) {
  margin-top: .25rem;
}

div#fetch_activity dt.fadeAway,
div#fetch_activity dd.fadeAway {
  color: rgba(135,135,135,.35);
  opacity: 0.95;
  transform: scaleY(0);
  max-height: 0px;
}
div#fetch_activity >dl >dd {
  color: red;
  text-indent: .5rem;
  font-style: italic;
}

div#fetch_activity > div.sk-circle {
  grid-area: 1/2/2/3;
}

/* spinner css */
.sk-circle {
  position: absolute;
  right: 0;
}

.sk-circle .sk-child {
  width: 24px;
  height: 12px;
}

.sk-circle .sk-child:before {
  content: '';
  display: block;
  margin: 0;
  width: 50%;
  height: 67%;
  background-color: #64a7aa;
  box-shadow: 5px 5px 10px 3px #fff;
  border-radius: 100%;
  -webkit-animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;
          animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;
}

.sk-circle.error .sk-child:before {
  background-color:red;
}

.sk-circle .sk-circle2 {
  -webkit-transform: rotate(30deg);
      -ms-transform: rotate(30deg);
          transform: rotate(30deg); }
.sk-circle .sk-circle3 {
  -webkit-transform: rotate(60deg);
      -ms-transform: rotate(60deg);
          transform: rotate(60deg); }
.sk-circle .sk-circle4 {
  -webkit-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
          transform: rotate(90deg); }
.sk-circle .sk-circle5 {
  -webkit-transform: rotate(120deg);
      -ms-transform: rotate(120deg);
          transform: rotate(120deg); }
.sk-circle .sk-circle6 {
  -webkit-transform: rotate(150deg);
      -ms-transform: rotate(150deg);
          transform: rotate(150deg); }
.sk-circle .sk-circle7 {
  -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
          transform: rotate(180deg); }
.sk-circle .sk-circle8 {
  -webkit-transform: rotate(210deg);
      -ms-transform: rotate(210deg);
          transform: rotate(210deg); }
.sk-circle .sk-circle9 {
  -webkit-transform: rotate(240deg);
      -ms-transform: rotate(240deg);
          transform: rotate(240deg); }
.sk-circle .sk-circle10 {
  -webkit-transform: rotate(270deg);
      -ms-transform: rotate(270deg);
          transform: rotate(270deg); }
.sk-circle .sk-circle11 {
  -webkit-transform: rotate(300deg);
      -ms-transform: rotate(300deg);
          transform: rotate(300deg); }
.sk-circle .sk-circle12 {
  -webkit-transform: rotate(330deg);
      -ms-transform: rotate(330deg);
          transform: rotate(330deg); }
.sk-circle .sk-circle2:before {
  -webkit-animation-delay: -1.1s;
          animation-delay: -1.1s; }
.sk-circle .sk-circle3:before {
  -webkit-animation-delay: -1s;
          animation-delay: -1s; }
.sk-circle .sk-circle4:before {
  -webkit-animation-delay: -0.9s;
          animation-delay: -0.9s; }
.sk-circle .sk-circle5:before {
  -webkit-animation-delay: -0.8s;
          animation-delay: -0.8s; }
.sk-circle .sk-circle6:before {
  -webkit-animation-delay: -0.7s;
          animation-delay: -0.7s; }
.sk-circle .sk-circle7:before {
  -webkit-animation-delay: -0.6s;
          animation-delay: -0.6s; }
.sk-circle .sk-circle8:before {
  -webkit-animation-delay: -0.5s;
          animation-delay: -0.5s; }
.sk-circle .sk-circle9:before {
  -webkit-animation-delay: -0.4s;
          animation-delay: -0.4s; }
.sk-circle .sk-circle10:before {
  -webkit-animation-delay: -0.3s;
          animation-delay: -0.3s; }
.sk-circle .sk-circle11:before {
  -webkit-animation-delay: -0.2s;
          animation-delay: -0.2s; }
.sk-circle .sk-circle12:before {
  -webkit-animation-delay: -0.1s;
          animation-delay: -0.1s; }

@-webkit-keyframes sk-circleBounceDelay {
  0%, 80%, 100% {
    -webkit-transform: scale(0);
            transform: scale(0);
  } 40% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@keyframes sk-circleBounceDelay {
  0%, 80%, 100% {
    -webkit-transform: scale(0);
            transform: scale(0);
  } 40% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

div#stop-wait {
    z-index: -1;
    position: fixed;
    display: grid;
    opacity: 0;
    top: calc(50vh - 4rem);
    left: 20vw;
    width: min(40rem, 60vw);
    height: 5rem;
    font-size: 1.25rem;
    line-height: 2.125rem;
    color: white;
    border: 2px solid rgb(100,100,100);
    border-radius: 1rem;
    align-content: center;
    justify-content: center;
    justify-items: center;
    background-color: rgb(50% 50% 50% / .8);
    filter: drop-shadow(2px 4px 6px black);
    transition: all 0.6s;
    padding:1rem;
}

div#stop-wait.showing {
  opacity: 1;
  z-index: 1002;
}

div#stop-wait >p {
  margin: 0;
}

div#stop-wait >p:first-child {
  font-size:4rem;
}

div#stop-wait span.local-storage-load {
  display: none;
  margin: 0 .5rem;
}

div#stop-wait span.local-storage-load.utilized {
  display: initial;
}

div#stop-wait span.local-storage-load.cached {
  color: rgb(0 255 0);
}

div#stop-wait span.local-storage-load.api-failed {
  color: rgb(255 165 0);
}

div#stop-wait span.local-storage-load.failed {
  color: rgb(255 0 0);
}

div#stop-wait.fadeAway {
  opacity: 0;
}

/* parking permit foo
 */
p.small-p {
  font-size:small;
  line-height:1rem;
  color:#644;
  margin:0;
  font-weight: 100;
}

p.small-p strong {
  text-decoration: underline;
}

section#resident div.fieldWrapper,
section#community div.fieldWrapper,
section#calendar div.fieldWrapper {
/*  opacity:0.1;*/
}

/* parking permit text in svg file, it's not represented the same in web SVG vs cairo2png */
svg > text {
  font-size:8.8pt;
}

svg > text:nth-child(28) {
  font-size:15pt;
}


div.minifield > span.hilite {
  background-color:#20f858;
}

div.fieldWrapper.grayout {
  background-color:#d0d0d0;
}

div.fieldWrapper ul {
  margin-left:0;
  width: inherit;
}

div.fieldWrapper li {
  padding:.1rem .25rem;
  font-family: Roboto, "Noto Sans", Arial, sans-serif;
  margin: 0 0 .1rem;
  padding-left:.5rem;
  font-size:large;
  color: var(--text-color-strong);
  background-color: var(--base-background-color);
  border: var(--item-border);
  border-radius: .25rem;
}

div.fieldWrapper li:not(:last-child) {
  border-bottom: 2px solid #e0e0e0;
}

div.fieldWrapper dl {
  display:grid;
  grid-template-columns:1fr 3fr;
  width: inherit;
}

div.fieldWrapper dt,
div.fieldWrapper dd {
    font-family: Roboto, "Noto Sans", Arial, sans-serif;
    margin: 0 0 .1rem;
    color: var(--text-color-medium);
    background-color: var(--background-color-demur);
    border-bottom: 2px solid #e0e0e0;
}

div.fieldWrapper dt {
    padding-left: .25rem;
    border-top-left-radius: .25rem;
    border-bottom-left-radius: .25rem;
    font-size: medium;
    font-weight: bold;
    min-height: 2rem;
}

div.fieldWrapper dd {
    padding-left:.5rem;
    padding-right: .25rem;
    border-top-right-radius: .25rem;
    border-bottom-right-radius: .25rem;
}

div.fieldWrapper #tag_search_results {
  max-height:800px;
  overflow-x: clip;
  overflow-y:scroll;
  display: flex;
  flex-direction: column;
}

/* just. what. the. fuck. google. */
/* copied from online (outdated?) */
/*.gm-style .gm-style-iw{font-weight:300;font-size:13px;overflow:hidden}
.gm-style .gm-style-iw-a{position:absolute;width:9999px;height:0}
.gm-style .gm-style-iw-t{position:absolute;width:100%}
.gm-style .gm-style-iw-t::after{background:linear-gradient(45deg,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 51%,rgba(255,255,255,0) 100%);box-shadow:-2px 2px 2px 0 rgba(178,178,178,.4);content:"";height:15px;left:0;position:absolute;top:0;transform:translate(-50%,-50%) rotate(-45deg);width:15px}
.gm-style .gm-style-iw-c{position:absolute;box-sizing:border-box;overflow:hidden;top:0;left:0;transform:translate(-50%,-100%);background-color:white;border-radius:8px;padding:12px;box-shadow:0 2px 7px 1px rgba(0,0,0,0.3)}

.gm-style .gm-style-iw-d{box-sizing:border-box;overflow:auto}
.gm-style .gm-style-iw-d::-webkit-scrollbar{width:18px;height:12px;appearance:none}
.gm-style .gm-style-iw-d::-webkit-scrollbar-track,.gm-style .gm-style-iw-d::-webkit-scrollbar-track-piece{background:#fff}
.gm-style .gm-style-iw-c .gm-style-iw-d::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,0.12);border:6px solid transparent;border-radius:9px;background-clip:content-box}
.gm-style .gm-style-iw-c .gm-style-iw-d::-webkit-scrollbar-thumb:horizontal{border:3px solid transparent}
.gm-style .gm-style-iw-c .gm-style-iw-d::-webkit-scrollbar-thumb:hover{background-color:rgba(0,0,0,0.3)}
.gm-style .gm-style-iw-c .gm-style-iw-d::-webkit-scrollbar-corner{background:transparent}
.gm-style .gm-iw{color:#2c2c2c}
.gm-style .gm-iw b{font-weight:400}
.gm-style .gm-iw a:link,.gm-style .gm-iw a:visited{color:#4272db;text-decoration:none}
.gm-style .gm-iw a:hover{color:#4272db;text-decoration:underline}
.gm-style .gm-iw .gm-title{font-weight:400;margin-bottom:1px}
.gm-style .gm-iw .gm-basicinfo{line-height:18px;padding-bottom:12px}
.gm-style .gm-iw .gm-website{padding-top:6px}
.gm-style .gm-iw .gm-photos{padding-bottom:8px;-ms-user-select:none;-moz-user-select:none;-webkit-user-select:none;user-select:none;}
.gm-style .gm-iw .gm-sv,.gm-style .gm-iw .gm-ph{cursor:pointer;height:50px;width:100px;position:relative;overflow:hidden}
.gm-style .gm-iw .gm-sv{padding-right:4px}
.gm-style .gm-iw .gm-wsv{cursor:pointer;position:relative;overflow:hidden}
.gm-style .gm-iw .gm-sv-label,.gm-style .gm-iw .gm-ph-label{cursor:pointer;position:absolute;bottom:6px;color:#fff;font-weight:400;text-shadow:rgba(0,0,0,0.7) 0 1px 4px;font-size:12px}

.gm-style .gm-iw .gm-stars-b,.gm-style .gm-iw .gm-stars-f{height:13px;font-size:0}
.gm-style .gm-iw .gm-stars-b{position:relative;background-position:0 0;width:65px;top:3px;margin:0 5px}
.gm-style .gm-iw .gm-rev{line-height:20px;-ms-user-select:none;-moz-user-select:none;-webkit-user-select:none;user-select:none;}
.gm-style .gm-china .gm-iw .gm-rev{display:none}
.gm-style .gm-iw .gm-numeric-rev{font-size:16px;color:#dd4b39;font-weight:400}
.gm-style .gm-iw.gm-transit{margin-left:15px}
.gm-style .gm-iw.gm-transit td{vertical-align:top}
.gm-style .gm-iw.gm-transit .gm-time{white-space:nowrap;color:#676767;font-weight:bold}
.gm-style .gm-iw.gm-transit img{width:15px;height:15px;margin:1px 5px 0 -20px;float:left}
.gm-style-iw-d{margin-top: 1rem;}
*/
/* copied from script */
/*.gm-style img{max-width: none;}.gm-style {font: 400 11px Roboto, Arial, sans-serif; text-decoration: none;}*/


/* manually figured out */
.gm-control-active {
/*  background-color: rgba(255,255,255,1);
  border-radius: 8px;
  display: block;
  height: 29px;
  left: 0px;
  overflow: hidden;
  position: absolute;
  cursor: pointer;
  width: 29px;
  z-index: 2;
  box-sizing: border-box;
  transition: background-color 0.16s ease-out;

  top: 0px;
  bottom: 0px;
*//*  border-top-left-radius: 0px;*/
/*  border-top-right-radius: 0px;*/
}

section.toggle-section {
  display: block;
}
section.toggle-section.hiding {
  display: none;
}
/* by default, show the agent log */


div.block-wrapper > #immobilizations {
  margin-top:10rem;
}

#immobilizations .spacer-row {
  height:0.5rem;
  background-color:black!important;
  margin-bottom:0;
}

#immobilizations ul {
  display:inline-block;
  text-align: left;
  width:100%;
  background-color: #f0f0f0;
  font-family: Roboto, "Noto Sans", Arial, sans-serif;
}

#immobilizations ul>li {
  border-bottom:2px solid #e0e0e0;
  margin:0 0 .1rem;
}

#immobilizations td {
  overflow-wrap: anywhere;
}

#immobilizations span.boot-applied-ts,
#immobilizations span.boot-removed-ts {
  font-family: Roboto, "Noto Sans", Arial, sans-serif;
  display: block;
  background-color: #f0f0f0;
  border-bottom:2px solid #e0e0e0;
  margin:0 0 .1rem;
}

#immobilizations span.boot-applied-ts::before {
  content: '🔒 ';
  color:red;
}
#immobilizations span.boot-removed-ts::before {
  content: '🔓 ';
  color:green;
}
#immobilizations span.payment-method {
  display: inline-block;
  border-radius: .5rem;
  padding: 0 .5rem;
  background-color: #a4d7da;
  font-weight: 600;
}
#immobilizations span.payment-amount {
  display: inline-block;
  border-radius: .5rem;
  padding: 0 .5rem;
  background-color: #fefefe;
  font-weight: 600;
}

#immobilizations span.embed-community-name,
#immobilizations span.embed-gps-location-address {
  font-family: Roboto, "Noto Sans", Arial, sans-serif;
  display: block;
  background-color: #f0f0f0;
  border-bottom:2px solid #e0e0e0;
  margin:0 0 .1rem;
  font-weight: 100;
}

#immobilizations span.embed-community-name {
  display: inline-block;
  border-radius: .5rem;
  padding: 0 .5rem;
  background-color: #fefefe;
  font-weight: 600;
}

#immobilizations .collapsed {
  display:none;
}

#immobilization-controls {
  display: inline-grid;
  position: fixed;
  top: 3rem;
  right: 1rem;
  z-index: 3;
  background-color: rgba(256,252,248,.8);
  padding: .5rem;
  border-radius: .5rem;
  border: 2px solid #888;
  visibility: hidden;
}

/*              ,
              linear-gradient(to bottom, transparent 93%, rgba(240,240,240,1) 94%, rgba(100,167,170,1) 98%, rgba(0,212,255,1) 100%) bottom,
              linear-gradient(to top, transparent 93%, rgba(240,240,240,1) 94%, rgba(100,167,170,1) 98%, rgba(0,212,255,1) 100%) top,
              linear-gradient(to left, transparent 93%, rgba(240,240,240,1) 94%, rgba(100,167,170,1) 98%, rgba(0,212,255,1) 100%) left,
              linear-gradient(to right, transparent 93%, rgba(240,240,240,1) 94%, rgba(100,167,170,1) 98%, rgba(0,212,255,1) 100%) right,
              radial-gradient(circle at 7% 7%, rgba(240,240,240,1) 1%, rgba(100,167,170,1) 4%, rgba(0,212,255,1) 7%, transparent 8%),
              radial-gradient(circle at 93% 7%, rgba(240,240,240,1) 1%, rgba(100,167,170,1) 4%, rgba(0,212,255,1) 7%, transparent 8%),
              radial-gradient(circle at 93% 93%, rgba(240,240,240,1) 1%, rgba(100,167,170,1) 4%, rgba(0,212,255,1) 7%, transparent 8%),
              radial-gradient(circle at 7% 93%, rgba(240,240,240,1) 1%, rgba(100,167,170,1) 4%, rgba(0,212,255,1) 7%, transparent 8%)
*/
table#immobilizations th.ab-meta,
table#immobilizations td.ab-meta {
    padding: .5rem;
    border: 4px solid transparent;
    border-radius: 7px;
    background:
        linear-gradient(to right, white, white),
        linear-gradient(15deg, transparent , #64a7aa);
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
}

/* stripe research */
#stripe-research-form .tinytext {
  font-size:xx-small;
}

#stripe-research-form .expired-dispute {
  color: #bbb;
}

#immobilization-photos span label {
  width:auto;
}

#immobilization-photos img.zoom-photo {
  width:auto;
  height:auto;
}

/* fragment-caches */
article#admin-bricks {
  min-width: unset;
  width: 2.5rem;
  position: fixed;
  z-index:10;
  top:64px;
  right:0;
  margin:0;
  padding:.2rem;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  box-shadow:unset;
  border: unset;
  background: unset;
}

article#admin-bricks>section {
  transition: width .5s ease-in-out, opacity .5s;
  display:flex;
  flex-direction: row;
  margin:.1rem 0;
  padding: 0;
  white-space: nowrap;
  box-shadow: 0 0 4px;
  overflow: hidden;
  cursor: col-resize;
}
article#admin-bricks>section>div {
  display: inline-flex;
  flex-direction: column;
  flex-wrap: wrap;
  flex-grow: 1;
}

/* class states:
   0  error  red bg
   1  empty  gray bg
   2  working gray bg with pulsing icon
   3  filled green bg
*/
article#admin-bricks>section>div>span {
  position: relative;
  overflow: hidden;
  display:inline-block;
  margin:.1rem;
  line-height: 1.2rem;
  padding-right: .5rem;
  border-bottom: 1px solid #a8a8a8;
  border-radius: .25rem;
  box-shadow: 0 0 2px 0.25px #e0e0e0;
  text-align: left;
  background-color: rgba(224,210,210,.5);
  color: #fff;
  transition: background-color .4s;
  min-width: fit-content;
}

article#admin-bricks>section>div.bars span.error {
  background-color: rgba(255,0,0,.5);
}
article#admin-bricks>section>div.bars span.empty {
  background-color: rgba(240,240,240,.5);
}
article#admin-bricks>section>div.bars span.working {
  background-color: rgba(240,240,240,.5);
}
article#admin-bricks>section>div.bars span.filled {
  background-color: rgba(0,255,0,.5);
}
article#admin-bricks>section>div.bars span.active {
  background-color: rgba(0,255,0,.5);
}

article#admin-bricks>section>div.bars>span>svg {
  display: inline-block;
  width: 1rem;
}

@keyframes color-pulse {
    0%   { color: rgba(255, 255, 255, 1); }
    50%  { color: rgba(255, 255, 255, 0); }
    100% { color: rgba(255, 255, 255, 1); }
}
div.bars span.working i.fa,
div.bars span.working i.fab,
div.bars span.working i.fas {
  animation: color-pulse .5s infinite;
}


article#admin-bricks>section>div.bars>span>i.fa,
article#admin-bricks>section>div.bars>span>i.fab,
article#admin-bricks>section>div.bars>span>i.fas {
  display: inline-block;
  position: absolute;
  left:0;
  top:.2rem;
  width:1rem;
  text-align: center;
}
article#admin-bricks>section>p {
  width: 1rem;
  margin:0;
  padding:0;
  font-size: small;
  font-style: initial;
  box-shadow: unset;
  writing-mode: vertical-lr;
  text-orientation: upright;
  font-size:small;
  line-height:1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

article#admin-bricks>section span#reload-cache {
  color: cyan;
  margin: .1rem;
  cursor: crosshair;
}

/* notifications */
article#admin-bricks>section#settings span#enabled {
  cursor: crosshair;
}

article#admin-bricks>section.collapsed {
  width:2.1rem;
  opacity:.6;
}

.page-title {
  text-align: left;
  margin-bottom: 0;
  font-weight: 900;
}
.page-version {
  margin-top: 0;
  text-align: left;
  font-style: italic;
  font-size: smaller;
  font-weight: lighter;
  line-height: 1;
}
details {
    position: relative;
    margin: 1rem .25rem 0 .25rem;
    padding: 0;
    border-radius: .25rem;
}

dl#permit-limits {
  grid-template-columns: 1fr 2fr;
/*  max-width: 100%;*/
}

section.voidable-permits dl {
  grid-template-columns: 8fr 1fr;
  max-width: unset;
}

.hideme {
  display: none!important;
}

.float-right-refresh-button {
    /*position: absolute;*/
    display: inline-block;
    right: 0;
}

div.fieldWrapper select.us-state-list.thin-state-list {
  width: 4rem;
  flex-grow: 0;
}

.shadow-box-red {
  box-shadow: 0 0 4px 4px rgba(200,100,100,1);
}

.sentry-error-embed-wrapper {
    background-color: rgb(0%,0%,0%,.8);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 200;
}

.sentry-error-embed.clearfix {
    background-color: rgb(90%,90%,90%);
    border: 3px solid red;
    border-radius: 0.5rem;
    margin: auto;
    padding: 0.5rem;
    position: absolute;
    top: 5rem;
    left: 1rem;
    right: 1rem;
}

div.sentry-error-embed-wrapper label {
    font-family: ui-monospace;
    font-size: 1rem;
    line-height: 1rem!important;
    overflow-wrap: anywhere;
}

p.fubar {
    color: orangered;
    font-size: smaller;
    line-height: 1.3rem;
}

div.state-zip-spacer {
    flex-grow: 1;
    border-right: 3px solid gray;
    margin-right: 0.5rem;
}

div.phone-info {
  font-size: 2rem;
  min-height: 30px;
}

div.inner-container img {
    height: 128px;
    width: 128px;
    display: block;
    margin: 0 auto;
}

div.av-main-nav-wrap ul {
  list-style: none;
}

ul.av-main-nav>li>a {
    font-size: 1.25rem;
    text-align: center;
    color: var(--button-green-color);
    background-color: var(--button-background-color);
    border: var(--button-border);
    border-radius: 0.5rem;
    padding: 0.1rem 0.2rem;
}

h1.av-special-heading-tag {
  font-size:1.5rem;
}

#header {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-top: 2rem;
}

#header_main {
  padding-top: 2rem;
}

#header_main_alternate {
  display: flex;
}

ul.av-main-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
ul.av-main-nav > li {
    background-color: rgba(200,200,200,.4);
    border: 1px solid rgba(180,180,180,1);
    border-radius: .25rem;
    padding: .1rem;
    display: inline-block;
}
ul.av-main-nav > li > a > .avia-menu-text {
    padding: .1rem;
    margin-left: 0;
    border: none;
}

.avia_textblock {
    line-height: 2rem;
    font-size: 1.25rem;
}

.av-special-heading-tag {
    text-align: center;
}

details {
/*  max-height: 2rem;*/
/*  transition: max-height 3500ms ease;*/
}

details[open] {
  max-height: 700rem;
  box-shadow: 0 0 8px 4px gray;
}

details.grayout {
  filter: grayscale(1);
}

details>summary {
  list-style: none;
}

summary::state(webkit-details-marker) {
  display: none;
  content: none;
}

summary::before {
    position: absolute;
    top: 0;
    left: -0.75rem;
    width: 2rem;
    height: 2rem;
    font-size: 2rem;
    line-height: 1.5rem;
    content: '►';
    z-index: 10;
    color: var(--section-title-background-color);
    filter: drop-shadow(0px 0px 3px black);
    transition: all 300ms ease;
    transform-origin: 40% 50%;
}

details[open] summary::before {
    transform: rotate(90deg);
}

.minifield-summary {
    display: grid;
    grid-auto-rows: 1fr;
    grid-template-columns: 2fr 3fr;
    grid-template-rows: 1fr;
    gap: 5px 5px;
    grid-template-areas:
        "title input";
    align-items: stretch;
    justify-items: stretch;

    font-style: italic;
    font-variant-caps: petite-caps;
    font-size: large;
    font-weight: 900;
    border-radius: .25rem;
    box-shadow: var(--section-title-box-shadow);
    background-color: var(--section-title-background-color);
    color: var(--text-color-bright);
    margin: .25rem 0;
    padding: .25rem;
}

.minifield-title {
    grid-area: title;
}

.minifield-input {
    grid-area: input;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.minifield-input.disabled {
    grid-area: input;
    opacity: 0.3;
}

.minifield-input > div {
    display: grid;
    justify-items: end;
    flex-shrink: 0;
    flex-grow: 1;
    width: calc(100% - .5rem);
    padding: .25rem;
}

.minifield-input > label {
    padding-right: .5rem;
}

.minifield-input > div > input,
.minifield-input > div > select
 {
    font-size: 1.125rem;
    box-sizing: border-box; /* needed to make INPUT and SELECT the same width */
    width: 100%;
    margin: 0;
    border-radius: .25rem;
    border: 1px solid rgba(200, 200, 200, .8);
}

.minifield-input > div > input::placeholder {
    font-size: .6rem;
}

.minifield-input button {
    font-size: 1.125rem;
}

.minifield-input output {
    justify-self: left;
    font-style: normal;
}

.step-number {
    position: absolute;
    right: 1rem;
    top: -2rem;
    font-size: 2.5rem;
    line-height: 0;
    font-weight: 500;
    background-color: var(--section-title-darker-background-color);
    color: var(--text-color-bright);
    display: inline-grid;
    justify-content: center;
    align-content: center;
    height: 2.5rem;
    width: 2.5rem;
    font-style: normal;
    border-radius: 50%;
    border: .25rem solid var(--article-background-color);
}

.step-number::before {
    content: 'Step';
    font-weight: bold;
    font-size: 2rem;
    line-height: 3rem;
    padding: 0 1rem;
    left: -6.33rem;
    top: -0.5rem;
    position: absolute;
    z-index: 2;
    border-radius: 0.25rem;
    border-top: .1ch solid;
/*    border-left: 1px solid;*/
    border-right: .67rem solid;
    color: var(--section-title-darker-background-color);
    background-color: var(--text-color-bright);
}



#test-mode-warning {
    position: fixed;
    top: 4rem;
    left: 5vw;
    width: 80vw;
    padding: 1rem;
    background-color: rgb(100% 0% 0% / .7);
    z-index: 9999;
    margin: 0 auto;
    color: yellow;
    border-radius: 1rem;
    text-align: center;
    font-size: 2rem;
    font-weight: 900;
}

/*input[name$="postal-code"] {
  width: 7rem!important;
}
*/
p[disabled],
details[disabled] {
    opacity: 0.3;
}

details[disabled] summary {
    pointer-events: none;
    user-select: none;
}

div.wrapper button.double-big-float {
    font-size: 3rem;
/*    line-height: 2rem;*/
    height: 3rem;
    width: 3rem;
    max-width: unset;
    position: absolute;
    display: flex;
    right: 0;
    top: -1rem;
    z-index: 1;
    justify-items: center;
    justify-content: center;
    align-items: center;
    padding-bottom: 1rem;
}

.hidden {
  display: none;
}

/*section.obscure fieldset {
    -webkit-mask-image: linear-gradient(to right, #000 55%, #0000 57%);
    -webkit-mask-size: 200%;
    -webkit-mask-position: 0%;
    transition: -webkit-mask-position .5s;
}

section.obscured fieldset {
    -webkit-mask-position: 100%;
}
*/
section {
    position: relative;
}

section.obscured::before {
    content: 'COMPLETE PREVIOUS SECTION';
    position: absolute;
    display: grid;
    height: 96%;
    width: 96%;
    left: 2%;
    top: 2%;
    z-index: 2;
    background-color: var(--help-box-background-color);
    color: var(--help-box-color);
    border-radius: 0.5rem;
    font-size: 1.25rem;
    line-height: 1.5rem;
    align-content: center;
    justify-content: center;
}

div.help-button {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    position: fixed;
    top: 3rem;
    left: 0.5rem;
    z-index: 1002;
    width: 3rem;
    max-width: 3rem;
    height: 3rem;
    overflow: hidden;
    border-radius: 50%;
    color: var(--button-green-color);
    background-color: var(--button-background-color);
    border: var(--button-border);
    box-shadow: inset -2px -2px 4px 1px var(--button-shadow);
    background-image: url(/static/images/get-help-button.svg);
    background-size: 3rem 3rem;
    background-position: bottom right;
    background-repeat: no-repeat;
    transition: border-radius 10ms, width 100ms, max-width 100ms, height 100ms;
  }

div.help-button.expanded {
  width: calc(100% - 1rem);
  max-width: calc(100% - 1rem);
  height: calc(100% - 5rem);
  border-radius: .5rem;
  overflow-y: auto;
}

div.help-button p.help-instructions-title {
  font-size: xx-large;
  margin-block: 1rem 0rem;
}

div.help-button ol {
  padding-inline-start: 1.5rem;
}

div.help-button li>p {
  margin-block-start: 0;
  margin-block-end: 0;
  font-size: smaller;
  font-style: italic;
}

div.help-button strong {
  font-size: x-large;
  font-variant: small-caps;
}

div.help-button button {
    width: calc(3rem + 2px);
    max-width: calc(3rem + 2px);
    height: calc(3rem + 2px);
    position: absolute;
    bottom: -1px;
    right: -1px;
    padding: unset;
    margin: unset;
    color: unset;
    background-color: unset;
    border: unset;
    box-shadow: unset;
}

p.attention {
  background-color: yellow;
  margin: .5rem 0;
}

div.allow-notifications-wrapper {
    display: none;
    position: fixed;
    bottom: -11rem;
    right: 1rem;
    padding: 1rem;
    border-radius: 0.5rem;
    background-color: var(--help-box-background-color-light);
    color: var(--help-box-color-light);
    transition: all 500ms;
}

div.allow-notifications-wrapper.show {
  display: block;
  bottom: 1rem;
}

.pulsey-portant {
  animation: pulsate 0.75s ease-out;
  animation-iteration-count: infinite;
  opacity: 0.5;
  font-weight: 900;
  font-size: 1.25rem;
  color: rgb(50% 50% 30% / 1);
}

@keyframes pulsate {
  0% {
    opacity: 0.5;
  }
  50% {
    opacity: 1.0;
  }
  100% {
    opacity: 0.5;
  }
}


.dual-ring-activity {
  color: var(--button-shadow);
  display: inline-block;
  position: relative;
}

.dual-ring-activity,
.dual-ring-activity:after {
  box-sizing: border-box;
}
.dual-ring-activity.active:after {
  content: ' ';
  display: block;
  position: absolute;
  top: -.75ch;
  left: -.75ch;
  aspect-ratio: 1;
  width: 150%;
  border-radius: 50%;
  border: 1ch solid currentColor;
  border-color: currentColor transparent currentColor transparent;
  animation: dual-ring-activity .6s linear infinite;
}

@keyframes dual-ring-activity {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}


/* social login */
.block-wrapper > div.row {
  margin-top:6rem;
}

.social-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.social-container button {
  box-shadow: unset;
}

/* light https://developers.google.com/identity/branding-guidelines */
.gsi-material-button {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -webkit-appearance: none;
  background-color: WHITE;
  background-image: none;
  border: 1px solid #747775;
  -webkit-border-radius: 20px;
  border-radius: 20px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #1f1f1f;
  cursor: pointer;
  font-family: 'Roboto', arial, sans-serif;
  font-size: 14px;
  height: 40px;
  letter-spacing: 0.25px;
  outline: none;
  overflow: hidden;
  padding: 0 12px;
  position: relative;
  text-align: center;
  -webkit-transition: background-color .218s, border-color .218s, box-shadow .218s;
  transition: background-color .218s, border-color .218s, box-shadow .218s;
  vertical-align: middle;
  white-space: nowrap;
  width: auto;
  max-width: 400px;
  min-width: min-content;
}

.gsi-material-button .gsi-material-button-icon {
  height: 20px;
  margin-right: 12px;
  min-width: 20px;
  width: 20px;
}

.gsi-material-button .gsi-material-button-content-wrapper {
  -webkit-align-items: center;
  align-items: center;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
  height: 100%;
  justify-content: space-between;
  position: relative;
  width: 100%;
}

.gsi-material-button .gsi-material-button-contents {
  -webkit-flex-grow: 1;
  flex-grow: 1;
  font-family: 'Roboto', arial, sans-serif;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: top;
}

.gsi-material-button .gsi-material-button-state {
  -webkit-transition: opacity .218s;
  transition: opacity .218s;
  bottom: 0;
  left: 0;
  opacity: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.gsi-material-button:disabled {
  cursor: default;
  background-color: #ffffff61;
  border-color: #1f1f1f1f;
}

.gsi-material-button:disabled .gsi-material-button-contents {
  opacity: 38%;
}

.gsi-material-button:disabled .gsi-material-button-icon {
  opacity: 38%;
}

.gsi-material-button:not(:disabled):active .gsi-material-button-state,
.gsi-material-button:not(:disabled):focus .gsi-material-button-state {
  background-color: #303030;
  opacity: 12%;
}

.gsi-material-button:not(:disabled):hover {
  -webkit-box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .30), 0 1px 3px 1px rgba(60, 64, 67, .15);
  box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .30), 0 1px 3px 1px rgba(60, 64, 67, .15);
}

.gsi-material-button:not(:disabled):hover .gsi-material-button-state {
  background-color: #303030;
  opacity: 8%;
}

.verified-badge {
    font-size: 1.5rem;
    line-height: 1.5rem;
    height: 2ch;
    width: 2ch;
    max-width: unset;
    opacity: 0.2;
    align-content: center;
    text-align: center;
}

.verified-badge.pending {
    opacity: 1;
    color: rgb(60% 70% 70% / 1);
}

.verified-badge.failed {
    opacity: 1;
    color: rgb(75% 50% 0% / 1);
}

.verified-badge.verified {
    opacity: 1;
    color: rgb(10% 60% 30% / 1);
}

.verified-badge.rejected {
    opacity: 1;
    color: rgb(50% 0% 0% / 1);
}

input.rejected {
    background: repeating-linear-gradient(-45deg, rgb(50% 0% 0% / .3), rgb(50% 0% 0% / .3) 15px, var(--background-color) 5px, var(--background-color) 20px)
}

input.accepted {
    background: rgb(0% 50% 0% / .3);
}

.fa {
    transition: all .5s;
}