:root {
  --x-sidebar-width: 300px; /* 408px; used in g-maps and --my-maps */
  --x-google-logo-height: 26px;
  --x-map-controls-height: 130px;
}

#map {
  width: 100vw; height: 100vh;
}

#app {
  position: absolute; top: 0px;
}

[v-cloak] {
  display: none;
}

html,
body {
  width: 100vw; height: 100vh;
  /* mobile viewport bug fix */
  height: -webkit-fill-available;
  margin: 0; padding: 0;
  overflow-y: auto !important;
  /* Disables pull-to-refresh but allows overscroll glow effects. (auto/default, contain, none) https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior */
  overscroll-behavior-y: contain;
}

a[title=""]::after { /* use title="" in <a tag>, but title=" " in a markdown link */
  content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQElEQVR42qXKwQkAIAxDUUdxtO6/RBQkQZvSi8I/pL4BoGw/XPkh4XigPmsUgh0626AjRsgxHTkUThsG2T/sIlzdTsp52kSS1wAAAABJRU5ErkJggg==);
  margin: 0 3px 0 5px;
}

.v-application--wrap {
  min-height: fit-content;
}
.v-label {
  font-size: 14px;
}
.v-input--selection-controls {
  margin-top: 0px;
}
.v-text-field>.v-input__control>.v-input__slot>.v-text-field__slot  {
  font-size: small;
}
.v-select__slot {
  font-size: small;
}
.v-textarea textarea {
  line-height: 1.2rem;
}
.v-expansion-panel-header {
  padding: 12px;
}
.v-expansion-panel-header>:not(.v-expansion-panel-header__icon) { /* only for info icon panel */
  flex: 0 0 auto;
}
.v-expansion-panel--active>.v-expansion-panel-header {
  min-height: 48px;
}
.v-expansion-panel-content__wrap {
  padding: 0 16px 16px;
}
.v-speed-dial--direction-left .v-speed-dial__list {
  padding: 0px; background-color: whitesmoke; 
}
.v-speed-dial__list .v-btn {
  margin: 1px;
}
.row+.row {
  margin-top: 2px;
}

.x-pa-2 { padding: 2px!important; }
.x-mt-2p { margin-top: 10px!important; }
.x-wspw { white-space:pre-wrap; }
.x-img-pointer { cursor: pointer; }
.x-p-custom>p { margin-bottom: 0px!important; }
.x-text-truncate { white-space: nowrap!important; overflow: hidden!important; text-overflow: ellipsis!important; }

.x-menu-top {
  position: absolute; top: 8px; height: 48px; z-index: 1; background-color: white; border-radius: 0 25px 25px 0;
}
.x-places {
  width:calc(var(--x-sidebar-width) - 92px);
  max-width:calc(80vw - 92px);
}
.x-vtf-custom.v-text-field>.v-input__control>.v-input__slot:before {
  border-style: none;
}
.x-vtf-custom.v-text-field>.v-input__control>.v-input__slot:after {
  border-style: none;
}

.x-sidebar {
  width: var(--x-sidebar-width) !important; height:100vh; 
  background-color: white;
  max-width: 80vw;
}
.x-sidebar-container {
  overflow-x: hidden; overflow-y: auto; height: calc(100vh - 64px - 52px - 48px); /* viewport - toolbar - footer (- info-panel) */
}

.x-listing {
  position:fixed; top:0; right: 0; bottom:0px; 
  height:100vh;
  background-color: white;
  max-width: 80vw;
}
.x-listing-handle { cursor: move; cursor: grab; cursor: -webkit-grabbing; }
.sortable-ghost { background:LightGray; opacity: 0.4; }
.sortable-chosen { background:LightCyan; }
.sortable-drag { background:LightBlue; }
.sortable-fallback { background:LightYellow; }
.x-listing-toggle { position: fixed; top: 8px; right: 8px; z-index: 1; }
.x-listing-container {
  overflow-x: hidden; overflow-y: auto; max-height: calc(100vh - 64px - 52px); /* viewport - toolbar - footer */
}
.x-list-item-first { background: lightgreen; }
.x-list-item-last { background: lightpink; }
.x-list-item-both { background: linear-gradient(to bottom,lightgreen, lightpink); }
.x-listing-container-routing {
  overflow-x: hidden; overflow-y: auto; height: calc(100vh - 64px - 52px - 48px); /* viewport - toolbar - footer - routing-panel */
}

.x-iw-toolbar {
  padding: 0px; font-size: 16px;
}
.x-iw-container {
  padding: 8px 0px 8px 8px; overflow-y: auto; overflow-x: hidden;
}
.x-iw-sticky-header {
  position: -webkit-sticky; position: sticky; top: 0px; background-color: white;
}
.x-iw-image {
  object-fit: scale-down; max-height: 100%!important; max-width: 100%!important;
}
/* where I got this from? .. copy to data.iwStyle in add-on Preferences to mimick iw looks there */
.x-iw-marked {
  font-weight: 300!important; font-size: 13px!important; letter-spacing: .0178571429em!important; line-height: 1.25rem; font-family: Roboto,sans-serif!important;
}
.markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4, .markdown-body h5, .markdown-body h6 {
  margin-top: 16px!important; margin-bottom: 8px!important;
}

.x-map-controls {
  background-color: white; border-radius: 2px; width: 32px;
}
.x-map-controls-types-osm {
  font-size:1.2em; color:BLACK; cursor: hand; opacity: 0.6; filter: alpha(opacity=60); text-shadow: -2px 0 #FFF, 0 2px #FFF, 2px 0 #FFF, 0 -2px #FFF;
  padding-left: 5px; padding-right: 5px; padding-top: 2px; padding-bottom: 2px; cursor: pointer;
}

.x-gdrive-auth-button {
  color: #fff;
  background: #4285f4;
  border: 1px solid #4285f4;
  border-radius: 500px;
  padding: 10px 50px;
  margin-top: 10px;
  font-weight: bold;
  font-family: Roboto,sans-serif!important;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

/* temporary snackbar ahead of loading vuetify https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_snackbar https://stackoverflow.com/a/60290737/1634207 */
#snackbar {
  visibility: hidden;
  min-width: 250px;
  max-width: 80vw;
  /* margin-left: -125px; */
  background-color: #333;
  color: #fff;
  text-align: left;
  border-radius: 2px;
  padding: 8px 16px;
  position: fixed;
  z-index: 5;
  left: 50%;
  transform: translateX(-50%);
  bottom: 8px;
  /* top: 8px; */
  font-size: 17px;
}
#snackbar.show {
  visibility: visible;
}
#snackbar a:link {color:yellow} #snackbar a:visited {color:lightyellow}