.bold {
    font-weight:bold;
}
.inbl {
    display:inline-block;
}
.inline{
    display:inline;
}
.m1{
    margin-left:1em;
}
.input.disabled {
    color:gray;
}
#side-panel label {
  padding: 10px;
  display: inline-block;
  max-width: 80%;
}
#side-panel .sub-panel {
  margin: 0 0 10px 0;
  margin-left: 0px;
}
/* body > { */
/*   margin: 10px; */
/* } */
body, input {
  font-size: x-large;
  /* overflow-wrap:anywhere; */
}
#app-wrapper {
    max-width: 900px;
}

#toggle-gps.tracking {
  background-color: forestgreen;
}
#layer-list {
  margin: 0px 0px 20px 0px;
  padding: 0 10px;
}
.narrow #side-panel {
  width: 90%;
  float: right;
  right: 0;
  top: -320px;
  position: relative;
}
#side-panel .sub-panel {
  margin: 0 0 10px 0;
}
#map, #map2 {
  height: 320px;
  width: 100%;
}
#side-panel h3 {
  margin: 0 10px 10px 10px;
}
.narrow #toggle-side-panel {
  position: relative;
  top: -320px;
  right: 0;
  float: right;
}
#layer-list input[type=button] {
  margin: 3px;
  padding: 5px;
}
.narrow #info {
  background-color: green;
}
#toggle-side-panel {
  position: absolute;
  /* right: 10px; */
  top: 10px;
  background-color: wheat;
  padding: 10px;
  z-index: 88;
}
#layer-list .delete {
  float: right;
}
.time-absolute .time .relative {
  display: none;
}
#layer-list .opacity label {
  max-width: 65%;
  font-size: large;
  padding: 0 10px;
}
#side-panel {
  position: absolute;
  top: 0px;
  /* right: 0px; */
  background-color: wheat;
  padding: 20px 10px;
  z-index: 99;
  width: 50%;
}
/* .swe { */
/*   .rl-1-background-color: #CAD500; */
/* } */
#popup input {
  font-size: xx-large;
  padding: 10px;
  margin: 10px;
}
.hidden {
  display: none !important;
}
#layer-list .layer, #side-panel .sub-panel {
  border: solid black 2px;
  margin-bottom: 20px;
  padding: 5px;
  list-style: none;
}
body.narrow {
  width: 340px;
}
#side-panel #ap > *, #side-panel .add-layer-wrapper {
  margin-left: 10px;
}
.ac-coll {
  padding: 0px 3px;
  display: inline-block;
}

.ac-coll.c3, .ac-coll.c5 {
    display:none;
}
.frid, .rlc.f{
    background: darkgreen;
    color: white;
}

.sa {
    background-color: lightgreen;
}
.st::after {
    content: "st";
}
.nr-rlc > span {
    margin-right: 0.5em;
}
#obs-stats > li {
    display: inline-block;
    margin: 0.1em;
}
#obs-stats .rlc {
    margin-right: 0.1em;
    padding: 0px 3px;
}

#obs-list .species > span {
    padding: 0px 3px; 
}

#obs-list .species :first-child {
    padding: 0;
    margin-right: 0.2em;
}

#empty-obs-list{
    margin:1em;
    padding:0.2em;
}

.obs {
    display: grid;
    grid-template-columns: 21% 21% 21% 21%;
    grid-template-rows: auto auto auto auto auto;
    grid-gap:0.2em;
    max-width:500px;
    margin-top:0.8em;
}

.obs .species {
    grid-row: 1/1;
    grid-column: 1/5;
    font-weight: bold;
}
.obs .description {
    display:none;
}
.obs .location-name {
    grid-row: 2/2;
    grid-column: 1/3;
}
.obs .datetime {
    grid-row: 3/3;
    grid-column: 1/5;
}

.obs .position {
    grid-row: 4/4;
    grid-column: 1/3;
}
.obs .goto {
    grid-row: 4/4;
    grid-column: 4/4;
}
.obs .accuracy {
    grid-row: 4/4;
    grid-column: 3/3;
    overflow-x: hidden;
}
.obs .edit {
    grid-row: 5/5;
    grid-column: 1/1;
}

.obs .del {
    grid-row: 5/5;
    grid-column: 4/4;
}
.obs.desc {
    display: grid;
    grid-template-columns: 21% 21% 21% 21%;
    grid-template-rows: auto auto auto auto auto auto;
    grid-gap:0.5em 0.3em;
}

.obs.desc .species {
    grid-row: 1/1;
    grid-column: 1/5;
    font-weight: bold;
}
.obs.desc .description {
    grid-row: 2/2;
    grid-column: 1/6;
    display:inherit;
}
.obs.desc .location-name {
    grid-row: 3/3;
    grid-column: 1/3;
}
.obs.desc .datetime {
    grid-row: 4/4;
    grid-column: 1/5;
}

.obs.desc .position {
    grid-row: 5/5;
    grid-column: 1/3;
}
.obs.desc .goto {
    grid-row: 5/5;
    grid-column: 4/4;
}
.obs.desc .accuracy {
    grid-row: 5/5;
    grid-column: 3/3;
    overflow-x: hidden;
}
.obs.desc .edit {
    grid-row: 6/6;
    grid-column: 1/1;
}

.obs.desc .del {
    grid-row: 6/6;
    grid-column: 4/4;
}


#layers {
    margin-top: 1.5em !important;
}

.layer .left-filler {
  display: inline-block;
  height: 42px;
  width: 1em;
}
}

.layer.minimized .input.opacity,
.layer.minimized .sublayers,
.layer.minimized input[type="button"],
.layer.minimized .left-filler {
    display: none;
}

.wrapper-min.minimized > .min-x {
    display: block;
}

.wrapper-min.minimized :nth-child(2) {
    display: block;
}

.min-x {
    cursor: pointer;
    position: absolute;
    right: 0.2em;
    top: -0.3em;
}
.min-x.open {
    right: 0.4em;
    top: -0.5em;
}

.wrapper-min {
    position: relative;
}

.layer-wrapper > .min-x.open {
    top: -0.7em;
}

.sub-panel h4 {
    margin: 0.5em 0;
}
#side-panel .ava-query-ids label {
    padding: 0;
}
#side-panel .map-name label {
    padding-left: 0;
}

.add-layer-wrapper button {
    padding: 0.5em;
    margin: 0.5em 0;
}

.add-layer-wrapper {
    border:1px solid black;
    padding:5px;
}

#ad-types,
#sks-types{
    display:grid;
    grid-template-columns:auto auto;
}

#ad-types > :first-child{
    grid-column:1/3;
    width:100%;
    font-size:inherit;
}
#side-panel #ad-types > :first-child label{
    font-size: inherit;
}

#ad-types > .input,
#sks-types > .input{
    display:inline-flex;
}

.minimized #ad-types,
.minimized #sks-types{
    display:none;
}


@media (max-width: 540px) {
    #sks-types{
	grid-template-columns:auto;
    }
}
@media (max-width: 375px) {
    #ad-types{
	grid-template-columns:auto;
    }
 #ad-types > :first-child{
    grid-column:1/2;
    }   
}
@media (max-width: 420px) {
    #sks-types .overlay-layers label,
    #ad-types .ad-org-cat label{
	font-size:large;
    }	
}


#side-panel #ad-types label,
#side-panel #sks-types label{
    padding: 5px;
    place-self: center;
    flex: auto;
    font-size: large;
}

#app-ap-import h3 {
    margin-left:0;
}

.narrow #app {
  width: 340px;
}
#toggle-gps {
  background-color: darksalmon;
}
.red {
  background-color: lightcoral;
}
#dev-btns {
    margin-bottom: 0.5em;
}

#dev-btns > * {
    margin: 5px;
}

#geo .auto-update-obs-pos label {
    margin: 0.5em 0;
    display: inline-block;
}
#geo .auto-update-obs-pos input {
    display: inline-block;
}


#side-panel .copy {
  display: block;
  padding: 3px 5px;
  margin: 10px 0;
}
#layer-list input[type=range] {
  display: block;
  max-width: 95%;
}
.time-relative .time .absolute {
  display: none;
}
.hide {
  display: none;
}
#side-panel #x {
  /* right: 20px; */
  top: 10px;
  position: absolute;
  padding: 10px;
  background: white;
  font-size: xx-large;
  border-radius: 10px;
  border: solid black 1px;
}
.time-relative .time .relative {
  display: initial;
}
.green {
  background-color: lightgreen;
}
.ac-row {
  margin: 3px;
  border-bottom: solid black 1px;
  padding: 3px;
}
.time-absolute .time .absolute {
  display: initial;
}
#popup {
    position: fixed;
    z-index: 666;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 20%;
}
#popup-wraper {
    background-color: pink;
    padding: 5% 5%;
    width: fit-content;
}

.ol-mouse-position {
  position: relative !important;
}

#settings div {
  padding:2px;
  border:solid black 1px;
  width:fit-content;
  margin:5px;
  border-radius:5px;
}


/* TODO move to gcc.cljs */

.ac-row :first-child {
  border-right:solid black 5px;
  padding-right: 5px;
  margin-right: 5px;
  font-weight: bold;
}

body{
    width: 100%;
}

body, input {
    font-size: x-large;
}


#map, #map2 {
    height: 30vh;
}

#page-links {
    margin-left: 20%;
    max-width: 75%;
    padding-left: 0;
}

#toggle-side-panel, #side-panel #x {
    padding:1em;
    font-size: xx-large;
    font-weight: bold;
    left:10px;
    cursor: pointer;
}

#side-panel {
    left:0;
    width: 60%;
    background-color: snow;
    padding: 12vh 2vw 2vh 2vw;
}
#layer-list label {
    font-size: 2.1vh;
}
#layer-list .opacity label {
    display: none;
}

#obs-edit {
    font-size: xx-large;
}

.input.position {
    display: inline-block;
    width: 60%;
}
.input.accuracy {
    display: inline-block;
    width: 40%;
}
#accuracy {
    width: 7em;
}

#obs-form input {
    padding: 1vh;
}

.input label {
  display: block;
}

#settings div{
    width: 95%;
}

#datetime{
    max-width: 60%;
}

#map .ol-zoom, #map .ol-rotate {
  top: 10vh;
}

@media (orientation: landscape) {

    #map, #map2 {
	height:80vh;
    }

    #toggle-side-panel, #side-panel #x{
	padding: 3vh;
	font-size: xx-large;
    }

    .ol-overlaycontainer-stopevent {
	top: 24vh;
    }
    body, input {
	font-size: large;
    }
    #obs-edit {
	font-size: x-large;
    }
}
.closed::after {
    /* U+25B6 */
    content:"▶";
    padding-left:2px;
}

.open::after {    
    /* U+25B2 */
    content:"▲";
    padding-left:2px;
}

.sub-panel .open::after {    
    /* U+25B2 */
    /* content:"▲"; */
    content:"-";
    padding-left:2px;
    font-weight: 900;
    font-size: 2.3em;
    margin-top: -0.2em;

}
.sub-panel .closed::after {
    /* U+25B6 */
    /* content:"▶"; */
    content:"+";
    padding-left:2px;
    font-weight: 900;
    font-size: 2em;
    margin-top: -0.2em;
}

#toggle-dev-btns {
    padding: 5px 0;
    margin: 5px 0;
}

.ava-query-ids textarea {
    width: 24em;
    height: 4em;
}

#ac-classes label, #lang-wrapper label, .ac-search label, #ignore-wrapper label{
    display: inline;
}
#ac-classes, #lang-wrapper {
    padding: 0;
    margin: 0;
    marker: none;
    display: grid;
    grid-template-columns: max-content max-content max-content;
}
#ac-classes li {
    marker: none;
    display: inline;
}

.input.search-ac {
    display: inline-block;
    width: 50%;
}

.search-ac label {
    display: inherit;
}

.rlc {
  text-transform: uppercase;
}
body.map-only {
    width: 99%;
}
body.map-only .ol-overlaycontainer-stopevent {
    top: 0;
}

body.map-only #map, #map2 {
    height: 30em;
    width: 96%;
}

#overlay {
    position: fixed;
    width: inherit;
    height: 100%;
    background-color: #fffc;
    z-index: 999;
    margin:0;
    padding:0;
    top:0;
    left:0;
}

#overlay .wrapper {
    height: 100%;
    display: grid;
    justify-items: center;
    align-items: center;
}
#legend {
    position: fixed;
    bottom: 3.5em;
    padding: 0;
    width: 40%;
    left: 1em;
    background-color: white;
    min-width: 16em;
    max-width: 20em;
}
#legend h3 {
    margin: 1em;
}

#legend li {
    list-style: none;
    display: grid;
    grid-template-columns: 15% 100%;
    margin: 0.5vh 0.5vw;
}

#legend span {
    width: 2vh;
    height: 2vw;
    display: flex;
    height: 60%;
    width: 40%;
    margin: 15% 20% 20% 10%;
    padding: 2px;
}
#legend label {
    vertical-align: middle;
    display: inline list-item;    
}

#legend-x {
  position: relative;
  right: 0.5em;
  top: 0.5em;
  float: right;
  padding: 0.1em 0.2em;
}
#legend ul {
  padding: 0;
  margin: 1em 2em 0.5em 0.2em;
}

#legend-toggle {
  position: fixed;
  bottom: 1em;
  left: 1em;
  padding: 0.6em;
}
#legend-toggle, #legend-x, #load-sks {
    cursor: pointer;    
    background-color: white;
    border-radius: 1em;
    border: solid black 1px;
    
}

#legend .red {
    background-color:#FF0000;
}
#legend .orange {
    background-color:#FFA500;
}
#legend .darkviolet {
    background-color:darkviolet;
}
#legend .cyan {
    background-color:cyan;
}
#legend .black {
    background-color:#040404;
}
#legend .blue {
    background-color:#0304FD;
}
#legend .darkgreen {
    background-color:#006400;
}
#legend .yellow{
    background-color:#FFFF00;
}

#load-sks{
    position:absolute;
    top: 25%;
    left: 21%;
    width: fit-content;
    max-width: 58%;
    padding: 0.5em 0 0.5em 1em;
}
#load-sks span {
    display: inline-block;
}

#page-links li {
    display: inline-block;
    margin-left: 0.5em;
}

#av-export {
    width: 100em;
    height: 20em;
}

.data-grid {
    display: grid;
    grid-template-columns: 48% 48%;
    grid-template-rows: max-content max-content max-content;
    width: 100%;
}
.data-grid > * {
}
#av-import {
    grid-row: 1/1;
    grid-column: 1/3;
    display:grid;
    grid-template-rows:max-content max-content;
    grid-template-columns:98%;
    grid-gap: 1em;
}
#av-import .import{
    grid-row: 2/2;
    grid-column: 1/1;
    display: grid;
    grid-template-columns: 45% 45%;
    grid-gap: 1em;
}

#av-import .rules{
    grid-row: 1/1;
    grid-column: 1/1;
    width: 100%;
    overflow: auto;
}

.text-area-wrapper {
    width: 96%;
    overflow: scroll;
}
#av-import .rules .find input {
    width: 8em;
}

#proj p {
    margin: 0.1em;
    grid-column: 1/3;
}
#proj .input{
    display:inline-block;
    margin-right: 0.4em;
}

#proj .input > * {
    vertical-align: middle;
    display: inline;
}

#av-submit-wrap {
    grid-column: 1/3;
    justify-content:center;
    display: inline-flex;
}
#av-submit{
    height: 3em;
    justify-self: center;
}
#convert-error-info{
    position:absolute;
    left:0;
}

.input.av-location-name label, .input.av-accuracy label {
    margin-bottom:0.2em;
}

.input.av-location-name input, input av-location-name input {
    width: 85%;
}

#av-import .rules input {
    width: 13em;
}
#av-import .rules .from select {
    width: 7em;
}
#av-import .rules .match select {
    width: 5em;
}
#av-import .rules .to select {
    width: 10em;
}

#av-import .rules td, #av-import .rules input{
    font-size: medium;
}
#av-result {
    display: block !important;
    grid-row: 2/2;
    grid-column-start: 1;
    grid-column-end: 3;
    width: 95%;
    font-size:medium;
}
#av-result {
    font-size: large;
}
#av-result .copy {
    font-size: medium;
}

#av-export {
    display: block !important;
    grid-row: 3/3;
    grid-column: 1/3;
}


.small {
    font-size:small;
}
.smaller {
    font-size:smaller;
}
.av-input > * {
    font-size: .8em;
    margin: 0.3em;
}


.obs-table table {
    border-collapse: collapse;
    width: max-content;
    font-size: medium;
}

.obs-table th {
    text-align: left;
   
    padding: 0.5em 0.5em 0.5em 0;
}

.obs-table td {
    border: 1px solid black;   
    padding: 0.5em;
}


#av-import .av-location-name, #av-import #proj {
    grid-column: 1/3;
}

#av-import .input.av-accuracy, #av-import .input.av-input {
    grid-column: 3/5;
}

#av-import .input.av-input, #av-import #proj {
    grid-row: 1/3;
}

#av-import .co-observers{
    grid-row: 1;
}
#av-import .av-location-name{
    grid-row: 2;
}
#av-import .input.av-accuracy{
    grid-row: 3;
    grid-column:1/3;
}
#av-import #proj, #av-import .input.av-input{
    grid-row: 4;
}
#av-import .input.av-input {
    justify-content: center;
    grid-template-columns: 24% 24% 4% 24% 24%;
    display:grid;
    grid-row: 2/5;
}

#av-import .import {
    grid-template-columns: 21% 21% 21% 21%;
    grid-template-rows: auto auto auto auto auto auto auto auto;
}
@media (min-width: 600px) {
    #av-import .import {
	grid-template-rows: auto auto auto auto auto auto auto;
    }
}

@media (max-width: 390px) {
    #av-import .import {
	grid-template-rows: auto auto auto auto auto auto auto;
    }
    /* #av-import .input.av-input{ */
    /* 	grid-row: 3/5; */
    /* } */
    /* #av-import #av-submit{ */
    /* 	grid-row:4; */
    /* 	grid-column:1/3; */
    /* } */
}

@media (max-width: 350px) {
    #av-import .import {
	grid-template-rows: auto auto auto auto auto auto auto;
    }
}

.obs-table {
    grid-column: 1/5;
    overflow-x: scroll;
    grid-row: 5;
}

.obs-table.data-prossed {
    grid-row: 7;
}

#av-submit-wrap {
    grid-column: 1/6;
}

.input.av-location-name input, .input.av-accuracy input {
    width: 90%;
}

#av-file-upload, #av-obs-from-app, #av-demo-data {
    grid-column: 4/6;
    grid-row:5;
    padding: 0.5em;
    justify-self: center;
    font-size: 0.5em;
    margin:0.5em 0;
    width:90%;
    max-width:14em;
}

#av-obs-from-app {
    grid-column: 1/3;
}

#av-file-upload {
    grid-column: 1/3;
    grid-row:4;
}

.av-input .clear-co-on-load{
    grid-column:1/6;
    font-size:small;
    display:flex;
    place-content:center;
    margin:0.5em 0;
}
.av-input .clear-co-on-load > *{
    display:inline-block;
    max-width:80%;
    margin-right: 0.5em;
}

.input.av-input label, .input.av-input input, .input.av-input .hinfo{
    grid-column: 1/6;
}

.input.av-input .hinfo{
    grid-row:1;
}

.input.av-input .hwrap > *{
    display:inline-block;
}
.input.av-input .hinfo h4{
   margin:0.5em 0;
}
.info-mark{
    display:inline-block;
    padding: 0.1em 0.5em;
    border: 1px black solid;
    border-radius: 1em;
    margin-left: 0.25em;
    margin-right: 0.25em;
}
.input.av-input .hinfo #input-popup-wrapper{
}
.info-popup-init {
    max-height:1.5em;
}
.info-popup-init.data-info {
    max-height:7.5em;
}

.info-popup-init.data-info .info-popup{
    margin-top:-7.5em;
}

.info-popup{
    position: relative;
    background-color: white;
    width: auto;
    padding: 0.5em 0.5em 1em 0.5em;
    margin-top: -2.4em;
    font-size: smaller;
    border: 1px solid black;
    border-radius: 1em;    
}
.info-close {
    content: "X";
    position: relative;
    right: 0.5em;
    top:0.3em;
    display: block;
    text-align: right;
}
.info-popup ul, .info-popup ol{
    padding-left:0;
}

.design-info span.plus-minus{
    padding-left: 2px;
    font-weight: 900;
    font-size: 2em;
    margin-top: -0.2em;
}
/* #input-popup-wrapper :first-child{ */
/*     margin-top:0; */
/* } */
.input.av-input label{
    grid-row:2;
}
.input.av-input input{
    grid-row:3;
}
.input.av-input label * {
    display:inline-block;
}
.input.av-input label h4{
    margin:0 0.5em 0 0
}
.obs-table h6 {
    margin: 0;
}

#av-import .info p {
    margin: 0.5em 0;
    font-size: medium;
}
#av-import .info h4, #av-import .info h5  {
    margin: 0.5em 0;
    display: inline-block;
}
#av-import .info .closed::after {
    font-size: large;
}

#av-import .co-observers {
    grid-column: 1/5;
}

#co-observers{
    width:96%;
    max-width:20em;
    display:grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: auto auto auto auto auto auto;
    grid-gap:0.5em;
    justify-content:center;
    align-content:center;
}
#co-observers > * {
    margin:0 0.5em;
    align-content:center;
}
#co-observers button,
#co-observers select{
    padding:0.5em;
    max-width:14em;
    place-self:center;
}
#co-observers :first-child,
#co-observers .save-co-observers-name,
#co-observers .save-co-observers-usernames,
#co-observers .co-observers-save-as-new
{
    grid-column:1/3;
}
#co-observers :first-child{
    grid-row:1;
}
#co-observers .save-co-observers-name{
    grid-row:2;
}
/* #co-observers .co-observers-save-as-new{ */
/*     grid-row:3; */
/* } */
#co-observers .save-co-observers-name > *{
    display:inline-block;
    margin-right:0.5em;
}

#co-observers .co-observers-save-as-new > *{
    display:inline-block;
    font-size:smaller;
}

#co-observers .save-co-observers-usernames{
    grid-row:3;
    display:grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: auto auto auto;
    grid-gap:0.2em;
}
#co-observers .save-co-observers-usernames label {
    grid-column:1/3;
    grid-row:1;
}
#co-observers .save-co-observers-usernames .small {
    grid-column:1/3;
    grid-row:2;
}
#co-observers .save-co-observers-usernames textarea {
    grid-column:1/3;
    grid-row:3;
    min-height:5em;
}

#co-observers #save-co-observers-list,
#co-observers #clear-co-observers{
   grid-row:4;
   margin-bottom: 1em;
}

#co-observers .sub-header,
#co-observers #co-observers-list{
    grid-row:5;
}
#co-observers #load-co-observers-list,
#co-observers #remove-co-observers-list{
    grid-row:6;
}
#co-observers #save-co-observers-list,
#co-observers #remove-co-observers-list{
    grid-column:1;
}

#co-observers #load-co-observers-list,
#co-observers #clear-co-observers{
    grid-column:2;
}
.wrapper-min.info.minimized h4 {
    display: inline-block;
}

.wrapper-min.info .hx {
    cursor: pointer;
}

.wrapper-min.info.minimized .hx {
    display: inline-block;
}

#rule-sets{
    font-size:medium;
    margin: 0.5em 0;
    display: grid;
    grid-template-columns: 48% 48%;
}
#rule-btns {
    display: grid;
    grid-template-columns: 30% 30% 30%;
    grid-gap:0.5em;
}
.wrapper-min.info.minimized #rule-btns{
    display:none;
}
#rule-btns > * {
    max-width:10em;
}

#rule-sets #save-rule-set{
    grid-column:1/3;
    grid-row:1;
}
#rule-sets #loading-rule-set{
    grid-column:1/3;
    grid-row:2;
}
#rule-sets input, #rule-sets label, #rule-sets button{
    display: block;
    align-self: center;
    margin: 0.3em 1em;
}
@media (min-width: 390px) {

    #rule-sets input, #rule-sets label, #rule-sets button{
	display: inline-block;
	align-self: center;
	margin: 0.3em 0.2em;
    }
}

#rule-sets #loading-rule-set > * {
    display: inline-block;
}
#rule-sets .input{
    width:fit-content;
}
#save-rule-set .btns > * {
    display: inline-block;
}


#position {
    width: 10em;
}
#accuracy {
    width: 5em;
}

#min-rlc {
    padding: 0.2em 0.5em;
    font-size: x-large;
    margin-left: 0.2em;
}

@media (max-width: 390px) {
    body, input, #obs-edit, #min-rlc {
	font-size: large;
    }
}

#toggle-side-panel, #side-panel #x {
    padding: 0.5em;
    top: 2.5em;
}
#side-panel {
    top: 4em;
    width: 80%;
    padding: 3em 0.2em 2em 0.2em;
}
#side-panel > :nth-child(2){
    margin-top:1.5em !important
}
#side-panel #x {
    top: 0;
}
.ava-query-ids textarea {
    width: 19em;
}

#ava-query .minimized,
#ad-query .minimized{
    padding-bottom: 0.5em;
}


#content-wrapper #app-ap-import{
    display: none;
}
/* .ac-row.par-reg { */
/*     background-clip: ; */
/*     background-color: lightgreen; */
/* } */


/* .ac-row.mini { */
/*     background-color: lightgrey; */
/* } */
/* #ac-list { */
/*     display: grid; */
/*     grid-template-columns: 50% 50%; */
/*     font-size: initial; */
/* } */

#pwa-install-banner,
#pwa-update-banner {
    position: fixed;
    color: ;
    background-color: gold;
    top: 0;
    padding: 1em;
    z-index: 99999;
}

#pwa-install-banner a.link,
#pwa-update-banner a.link {
    text-decoration-line: underline;
    cursor: pointer;
}
#pwa-install-banner a.link.close,
#pwa-update-banner a.link.close {
    margin-left:2em;
}

#pwa-install-info,
#pwa-update-info{
    position: fixed;
    z-index: 99999;
    top: 3em;
    background-color: white;
    border: solid;
    border-radius: 0.5em;
    padding: 1em;
}

/* map overlay popup */

.overlay-info {
    position: absolute;
    background-color: white;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
    padding: 15px;
    border-radius: 10px;
    border: 1px solid #cccccc;
    bottom: 12px;
    left: -50px;
    min-width: 250px;
    font-size:medium;
}
@media (max-width: 400px) {
    .overlay-info {
	min-width: 165px;
	font-size:small;
    }
}

.overlay-row{
    margin-bottom:10px
}
.overlay-info:after, .overlay-info:before {
    top: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: fixed;
    pointer-events: none;
}
.overlay-info:after {
    border-top-color: white;
    border-width: 15px;
    left: 0px;
    margin-left: -14px;
    top:-13px;
}
.overlay-info:before {
    border-top-color: #cccccc;
    border-width: 16px;
    left: 0px;
    margin-left: -16px;
    top:-13px;
}
.overlay-info-closer {
    text-decoration: none;
    position: absolute;
    top: 2px;
    right: 8px;
}
.overlay-info-closer:after {
    content: "✖";
}
.overlay-content {
    max-height: 8em;
    max-width:95%;
    overflow-y: auto;
}
@supports (-webkit-touch-callout: none) {
    /* CSS specific to iOS devices */
    #obs-list .obs input[type="button"]{
	font-size:large;
    }
    #empty-obs-list{
	font-size:large;
	height:2.5em;
    }
}

#install-info {
    max-width:30em;
}

#fp-wrapper .pc :first-child {
    font-weight: bold;
    list-style: none;
}
#fp-wrapper .info-only > li {
    list-style:none;
    margin-top:0.5em;
}
#fp-wrapper .closed::after {
    margin-left:1em;
}

#fp-wrapper .open::after {    
    margin-left:1em;
}
#fp-wrapper .wrapper-min.info .hx {
    display:inline-block;
}
#toggle-dev-btns {
    cursor: pointer;
}
.wrapper-min.minimized > * {
    display: none;
}
.wrapper-min.minimized.info :nth-child(2) {
    display: none !important;
}

.wrapper-min.minimized #rule-sets{
    display:none;
}


/* from helpers RL */

.swe .dd {
  background-color: #DDE0DF;
}

.int .dd {
  background-color: white;
  color: black;
}
.swe .na {
  background-color: #DDE0DF;
}

.int .na {
  background-color: white;
  color: black;
}
.swe .ne {
  background-color: #DDE0DF;
}

.int .ne {
  background-color: white;
  color: black;
}
.swe .lc {
  background-color: #CAD500;
}

.int .lc {
  background-color: #1E6667;
  color: #FEFEFE;
}
.swe .nt {
  background-color: #F7C5C9;
}

.int .nt {
  background-color: #1E6667;
  color: #AAD59D;
}
.swe .vu {
  background-color: #EA828E;
}

.int .vu {
  background-color: #C99A00;
  color: #FAF5CD;
}
.swe .en {
  background-color: #E1506B;
}

.int .en {
  background-color: #C66527;
  color: #FBD09A;
}
.swe .cr {
  background-color: #DD004D;
}

.int .cr {
  background-color: #C52D2B;
  color: #F9C9C8;
}
.swe .re {
  background-color: #46142F;
  color: white;
}

.int .re {
  background-color: red;
  color: white;
}
.swe .ew {
  background-color: black;
  color: white;
}

.int .ew {
  background-color: black;
  color: white;
}
.swe .ex {
  background-color: black;
  color: red;
}

.int .ex {
  background-color: black;
  color: red;
}