/* tsm.css - city theme overrides */
:root {
  --main-color: #8b469b;
  --main-color-dark: #5f2f6a;
  --main-color-soft: #a769b7;
  --main-color-accent: #c08ace;
  --main-color-alpha-80: #8b469bcc;
  --main-color-soft-alpha-80: #a769b7cb;
  --surface-soft: #fbf5fd;
  --text-on-main: #fff;

  /* backward-compatible aliases */
  --tsm-main: var(--main-color);
  --tsm-dark: var(--main-color-dark);
  --tsm-right: var(--main-color-soft);
  --tsm-accent: var(--main-color-accent);
}

/* migrated from ngkt.css so ngkt.css can be removed from index.html */

/* ol */
.ol-scale-line, .ol-zoom-in, .ol-zoom-out, .ol-control button, .ol-control button:focus, .ol-control button:hover {
  background: var(--main-color-alpha-80, #29b25dcc) !important;
}

/* nav */
.gau-nav-side h3 {
  background-color: var(--main-color-soft-alpha-80, #52bd6dcb);
}
._gau-nav-main-toggle {
  background-color: var(--main-color, #29b25d);
}
._gau-nav-main-toggle::after {
  background: var(--main-color, #29b25d);
}
.gau-nav-side .gau-nav-btn * {
  background-color: var(--main-color-soft, #52bd6d);
}

/*================================
    agreement
=================================*/

#agreement {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 3000;
}

#agreement > div {
  -webkit-overflow-scrolling: touch;
  position: relative;
  background-color: white;
  margin: 20px;
  max-width: 600px;
  max-height: 800px;
  height: calc(100% - 40px);
  box-shadow: 0px 0px 10px 4px rgba(0, 0, 0, 0.2);
  text-align: center;
  border-radius: 3px;
}

#agreement h2 {
  color: white;
  padding: 15px;
  padding-bottom: 8px;
  font-size: 15px;
  border-bottom: 1px solid #ccc;
  background-color: var(--main-color-soft, #52bd6d);
}

#agreement h2 i {
  margin-right: 6px;
}

#agreement > div > div {
  box-sizing: border-box;
  overflow: auto;
  width: 100%;
  height: 90%;
  position: absolute;
  padding: 11px;
  background-image: url(emblem.png);
  background-repeat: no-repeat;
  background-position: center;
}

#agreement p {
  font-size: 12px;
}

#agreement h3 {
  margin-top: 20px;
  font-size: 12px;
  font-size: 14px;
  color: var(--main-color-soft, #52bd6d);
}

#agreement ol {
  text-align: left;
  padding: 6px;
}

#agreement ol li {
  list-style-type: decimal;
  font-size: 13px;
  margin-left: 28px;
}

button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
}

.agreement_ask {
  margin: 12px;
  padding: 10px;
  color: #888;
}

.align-left {
  text-align: left;
}

#agreement button {
  margin: 12px;
  padding: 5px 10px;
  width: 110px;
  background-color: var(--main-color-soft, #52bd6d);
  color: white;
  font-size: 16px;
  border-radius: 2px;
  box-shadow: 0 2px 3px #ccc;
  -webkit-appearance: none;
}

#agreement dl {
  padding: 16px;
}

#agreement dt {
  color: #888;
  font-size: 12px;
}

/* disp */
div.app-disptool {
  position: fixed;
  left: 50px;
  top: 20px;
}

select.app-viewtab {
  position: fixed;
  left: 48px;
  top: 48px;
  z-index: 0;
  width: 110px;
}

input[name=bgopa] {
  width: 90px;
}

input[name=bgopa_nav] {
  width: 100%;
  height: 100%;
}

/* loading */
#loading {
  left: 50%;
  top: 50%;
}

.ball-scale-ripple-multiple > div {
  border-color: var(--main-color-accent, #A58A43);
}

/* measure */
#app_measure {
  position: absolute;
  text-align: center;
  top: 20%;
  left: 0;
  width: 40px;
  height: 160px;
  z-index: 990;
  background-color: rgba(0, 0, 0, .5);
  cursor: pointer;
  box-shadow: 0px 3px 3px #555;
  color: white;
  border-radius: 0 6px 6px 0;
}

#app_measure li {
  width: 40px;
  height: 40px;
  line-height: 40px;
  font-size: 24px;
}

.app-measure-selected {
  color: #ffcc33;
}

#app_measure_tool {
  border-top: 1px solid #ccc;
  background: rgba(255, 255, 255, 0.4);
}

.gau-nav-side li, .gau-nav-main li {
  font-size: 16px;
}

.app-disptool {
  position: absolute !important;
  left: 3em !important;
  top: 0.75em !important;
  background-color: var(--main-color-alpha-80, #29b25dcc);
  padding: 0.8em;
  width: auto;
  border-radius: 3px;
}

select.app-viewtab {
  position: relative;
  left: 0;
  top: 0;
  z-index: 0;
  width: 220px;
  padding: 0;
  border-radius: 3px;
  height: 24px;
}

.app-disptool h5 {
  display: none;
  color: white;
  font-size: 11px;
}

.gau-nav-main {
  background-repeat: no-repeat;
}

.gau-nav-item-category i {
  margin-right: 7px;
  font-size: small;
}

li.gau-nav-item-category {
  background-color: inherit;
}

li.gau-nav-item-category:hover {
  background-color: inherit;
}