:root,
:host {
  --ol-background-color: white;
  --ol-accent-background-color: #F5F5F5;
  --ol-subtle-background-color: rgba(128, 128, 128, 0.25);
  --ol-partial-background-color: rgba(255, 255, 255, 0.75);
  --ol-foreground-color: #333333;
  --ol-subtle-foreground-color: #666666;
  --ol-brand-color: #00AAFF;
}

.ol-box {
  box-sizing: border-box;
  border-radius: 2px;
  border: 1.5px solid var(--ol-background-color);
  background-color: var(--ol-partial-background-color);
}

.ol-mouse-position {
  top: 8px;
  right: 8px;
  position: absolute;
}

.ol-scale-line {
  background: var(--ol-partial-background-color);
  border-radius: 4px;
  bottom: 2px;
  left: 2px;
  padding: 2px;
  position: absolute;
}

.ol-scale-line-inner {
  border: 1px solid var(--ol-subtle-foreground-color);
  border-top: none;
  color: var(--ol-foreground-color);
  font-size: 10px;
  text-align: center;
  margin: 1px;
  will-change: contents, width;
  transition: all 0.25s;
}

.ol-scale-bar {
  position: absolute;
  bottom: 8px;
  left: 8px;
}

.ol-scale-bar-inner {
  display: flex;
}

.ol-scale-step-marker {
  width: 1px;
  height: 15px;
  background-color: var(--ol-foreground-color);
  float: right;
  z-index: 10;
}

.ol-scale-step-text {
  position: absolute;
  bottom: -5px;
  font-size: 10px;
  z-index: 11;
  color: var(--ol-foreground-color);
  text-shadow: -1.5px 0 var(--ol-partial-background-color), 0 1.5px var(--ol-partial-background-color), 1.5px 0 var(--ol-partial-background-color), 0 -1.5px var(--ol-partial-background-color);
}

.ol-scale-text {
  position: absolute;
  font-size: 12px;
  text-align: center;
  bottom: 25px;
  color: var(--ol-foreground-color);
  text-shadow: -1.5px 0 var(--ol-partial-background-color), 0 1.5px var(--ol-partial-background-color), 1.5px 0 var(--ol-partial-background-color), 0 -1.5px var(--ol-partial-background-color);
}

.ol-scale-singlebar {
  position: relative;
  height: 10px;
  z-index: 9;
  box-sizing: border-box;
  border: 1px solid var(--ol-foreground-color);
}

.ol-scale-singlebar-even {
  background-color: var(--ol-subtle-foreground-color);
}

.ol-scale-singlebar-odd {
  background-color: var(--ol-background-color);
}

.ol-unsupported {
  display: none;
}

.ol-viewport,
.ol-unselectable {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.ol-viewport canvas {
  all: unset;
  overflow: hidden;
}

.ol-viewport {
  touch-action: pan-x pan-y;
}

.ol-selectable {
  -webkit-touch-callout: default;
  -webkit-user-select: text;
  -moz-user-select: text;
  user-select: text;
}

.ol-grabbing {
  cursor: -webkit-grabbing;
  cursor: -moz-grabbing;
  cursor: grabbing;
}

.ol-grab {
  cursor: move;
  cursor: -webkit-grab;
  cursor: -moz-grab;
  cursor: grab;
}

.ol-control {
  position: absolute;
  background-color: var(--ol-subtle-background-color);
  border-radius: 4px;
}

.ol-zoom {
  top: .1em !important;
  left: .1em !important;
}

.ol-rotate {
  top: .5em;
  right: .5em;
  transition: opacity .25s linear, visibility 0s linear;
}

.ol-rotate.ol-hidden {
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s linear, visibility 0s linear .25s;
}

.ol-zoom-extent {
  top: 4.643em;
  left: .5em;
}

.ol-full-screen {
  right: .1em;
  top: .1em;
}

.ol-control button {
  display: block;
  margin: 1px;
  padding: 0;
  color: var(--ol-subtle-foreground-color);
  font-weight: bold;
  text-decoration: none;
  font-size: inherit;
  text-align: center;
  height: 1.375em;
  width: 1.375em;
  line-height: .4em;
  background-color: var(--ol-background-color);
  border: none;
  border-radius: 2px;
}

.ol-control button::-moz-focus-inner {
  border: none;
  padding: 0;
}

.ol-zoom-extent button {
  line-height: 1.4em;
}

.ol-compass {
  display: block;
  font-weight: normal;
  will-change: transform;
}

.ol-touch .ol-control button {
  font-size: 1.5em;
}

.ol-touch .ol-zoom-extent {
  top: 5.5em;
}

.ol-control button:hover,
.ol-control button:focus {
  text-decoration: none;
  outline: 1px solid var(--ol-subtle-foreground-color);
  color: var(--ol-foreground-color);
}

.ol-zoom .ol-zoom-in {
  border-radius: 2px 2px 0 0;
}

.ol-zoom .ol-zoom-out {
  border-radius: 0 0 2px 2px;
}

.ol-attribution {
  text-align: right;
  bottom: .1em !important;
  right: .1em !important;
  max-width: calc(100% - 1.3em);
  display: flex;
  flex-flow: row-reverse;
  align-items: center;
}

.ol-attribution a {
  color: var(--ol-subtle-foreground-color);
  text-decoration: none;
}

.ol-attribution ul {
  margin: 0;
  padding: 1px .5em;
  color: var(--ol-foreground-color);
  text-shadow: 0 0 2px var(--ol-background-color);
  font-size: 10px;
}

.ol-attribution li {
  display: inline;
  list-style: none;
}

.ol-attribution li:not(:last-child):after {
  content: " ";
}

.ol-attribution img {
  max-height: 2em;
  max-width: inherit;
  vertical-align: middle;
}

.ol-attribution button {
  flex-shrink: 0;
}

.ol-attribution.ol-collapsed ul {
  display: none;
}

.ol-attribution:not(.ol-collapsed) {
  background: var(--ol-partial-background-color);
}

.ol-attribution.ol-uncollapsible {
  bottom: 0;
  right: 0;
  border-radius: 4px 0 0;
}

.ol-attribution.ol-uncollapsible img {
  margin-top: -.2em;
  max-height: 1.6em;
}

.ol-attribution.ol-uncollapsible button {
  display: none;
}

.ol-zoomslider {
  top: 4.5em;
  left: .5em;
  height: 200px;
}

.ol-zoomslider button {
  position: relative;
  height: 10px;
}

.ol-touch .ol-zoomslider {
  top: 5.5em;
}

.ol-overviewmap {
  left: 0.5em;
  bottom: 0.5em;
}

.ol-overviewmap.ol-uncollapsible {
  bottom: 0;
  left: 0;
  border-radius: 0 4px 0 0;
}

.ol-overviewmap .ol-overviewmap-map,
.ol-overviewmap button {
  display: block;
}

.ol-overviewmap .ol-overviewmap-map {
  border: 1px solid var(--ol-subtle-foreground-color);
  height: 150px;
  width: 150px;
}

.ol-overviewmap:not(.ol-collapsed) button {
  bottom: 0;
  left: 0;
  position: absolute;
}

.ol-overviewmap.ol-collapsed .ol-overviewmap-map,
.ol-overviewmap.ol-uncollapsible button {
  display: none;
}

.ol-overviewmap:not(.ol-collapsed) {
  background: var(--ol-subtle-background-color);
}

.ol-overviewmap-box {
  border: 1.5px dotted var(--ol-subtle-foreground-color);
}

.ol-overviewmap .ol-overviewmap-box:hover {
  cursor: move;
}

/* Custom CSS for map styling */

#map {
  background-color: white;
  height: 32rem;
  border: 1px solid #ccc;
}

.ol-compass-image {
  width: 35px;
  position: absolute;
  top: 0.1em;
  right: 40px;
  opacity: 1;
}

.ol-logo-image {
  width: 25px;
  position: absolute;
  bottom: 0.3em;
  right: 0.2em;
  opacity: 0.9;
}

.ol-lat-lng-position {
  font-size: 12px;
  bottom: 0.1rem !important;
  color: black;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.7);
  padding: 2px 5px;
  border-radius: 3px;
}

.ol-select-layer {
  font-size: 12px;
  font-weight: bold;
  top: 0.1rem !important;
  color: black;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.7);
  padding: 2px 5px;
  border-radius: 3px;
  border-color: lightgray;
}

.ol-select-layer:focus {
  outline: none;
}

.ol-active-button {
  filter: invert(1) sepia(1) saturate(0) brightness(2);
}

.ol-hidden {
  opacity: 0;
  visibility: hidden;
  transition: opacity 500ms, visibility 500ms;
}

.ol-whitelining-input {
  font-family: sans-serif !important;
  font-weight: bold !important;
  font-size: 12px !important;
  background-color: white !important;
  color: white !important;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: auto;
  padding: 5px 5px;
  border: 1px solid gray !important;
  border-radius: 5px;
}

.ol-whitelining-input-title {
  font-size: 1.25em;
  color: black;
  font-weight: bold !important;
}

.ol-whitelining-input-label {
  color: black;
  background-color: white;
  font-weight: bold !important;
  border-radius: 3px;
}

.ol-whitelining-input-label::after {
  content: '*';
  color: red;
  margin-left: 3px;
  font-size: small;
}

.ol-whitelining-input-distance {
  color: black;
  font-weight: bold !important;
}

.ol-whitelining-input-button {
  border-radius: 5px;
}

.ol-btn-toggle-controls {
  background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='gray' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z'/></svg>") !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 20px !important;
  border: 1px solid gray !important;
}

.ol-btn-zoom-all {
  background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='none' stroke='gray' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='m8 3.293 6 6V13.5a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 13.5V9.293l6-6zm5-.793V6l-2-2V2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5z'/><path fill-rule='evenodd' d='M7.293 1.5a1 1 0 0 1 1.414 0l6.647 6.646a.5.5 0 0 1-.708.708L8 2.207 1.354 8.854a.5.5 0 1 1-.708-.708L7.293 1.5z'/></svg>") !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 20px !important;
  border: 1px solid gray !important;
}

.ol-btn-draw-point {
  background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='gray' xmlns='http://www.w3.org/2000/svg'><path d='M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z'/></svg>") !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 20px !important;
  border: 1px solid gray !important;
}

.ol-btn-draw-line {
  background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='gray' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M13.854 2.146a.5.5 0 0 1 0 .708l-11 11a.5.5 0 0 1-.708-.708l11-11a.5.5 0 0 1 .708 0Z'/></svg>") !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 20px !important;
  border: 1px solid gray !important;
}

.ol-btn-draw-polygon {
  background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='none' stroke='gray' xmlns='http://www.w3.org/2000/svg'><path d='M7.685.256a.5.5 0 0 1 .63 0l7.421 6.03a.5.5 0 0 1 .162.538l-2.788 8.827a.5.5 0 0 1-.476.349H3.366a.5.5 0 0 1-.476-.35L.102 6.825a.5.5 0 0 1 .162-.538l7.42-6.03Z'/></svg>") !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 20px !important;
  border: 1px solid gray !important;
}

.ol-btn-edit {
  background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='gray' xmlns='http://www.w3.org/2000/svg'><path d='M5 2V0H0v5h2v6H0v5h5v-2h6v2h5v-5h-2V5h2V0h-5v2H5zm6 1v2h2v6h-2v2H5v-2H3V5h2V3h6zm1-2h3v3h-3V1zm3 11v3h-3v-3h3zM4 15H1v-3h3v3zM1 4V1h3v3H1z'/></svg>") !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 20px !important;
  border: 1px solid gray !important;
}

.ol-btn-measure {
  background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='none' stroke='gray' xmlns='http://www.w3.org/2000/svg'><path d='M1 0a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h5v-1H2v-1h4v-1H4v-1h2v-1H2v-1h4V9H4V8h2V7H2V6h4V2h1v4h1V4h1v2h1V2h1v4h1V4h1v2h1V2h1v4h1V1a1 1 0 0 0-1-1H1z'/></svg>") !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 20px !important;
  border: 1px solid gray !important;
}

.ol-btn-bullseye {
  background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='gray' xmlns='http://www.w3.org/2000/svg'><path d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/><path d='M8 13A5 5 0 1 1 8 3a5 5 0 0 1 0 10zm0 1A6 6 0 1 0 8 2a6 6 0 0 0 0 12z'/><path d='M8 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm0 1a4 4 0 1 0 0-8 4 4 0 0 0 0 8z'/><path d='M9.5 8a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z'/></svg>") !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 20px !important;
  border: 1px solid gray !important;
}

.ol-btn-trash {
  background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='gray' xmlns='http://www.w3.org/2000/svg'><path d='M5.5 1a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1H14a.5.5 0 0 1 0 1h-1v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V2H2a.5.5 0 0 1 0-1h3.5zM4.118 3 4 3.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V3.059L11.882 3H4.118zM5 4a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7A.5.5 0 0 1 5 4zm3 0a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7A.5.5 0 0 1 8 4zm3 .5a.5.5 0 0 1 1 0v7a.5.5 0 0 1-1 0v-7z'/></svg>") !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 20px !important;
  border: 1px solid gray !important;
}

.ol-btn-block {
  background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='none' stroke='gray' xmlns='http://www.w3.org/2000/svg'><rect x='0.5' y='0.5' width='15' height='15' stroke='gray' fill='none' stroke-width='1'/><path fill-rule='evenodd' d='M15.528 2.973a.75.75 0 0 1 .472.696v8.662a.75.75 0 0 1-.472.696l-7.25 2.9a.75.75 0 0 1-.557 0l-7.25-2.9A.75.75 0 0 1 0 12.331V3.669a.75.75 0 0 1 .471-.696L7.443.184l.004-.001.274-.11a.75.75 0 0 1 .558 0l.274.11.004.001 6.971 2.789Zm-1.374.527L8 5.962 1.846 3.5 1 3.839v.4l6.5 2.6v7.922l.5.2.5-.2V6.84l6.5-2.6v-.4l-.846-.339Z'/></svg>") !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 20px !important;
  border: 1px solid gray !important;
}

.ol-btn-identify {
  background-image: url("data:image/svg+xml,<svg viewBox='0 0 24 24' fill='gray' xmlns='http://www.w3.org/2000/svg'><path d='M4 4h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H8l-4 4V6a2 2 0 0 1 2-2z' stroke='gray' stroke-width='2' fill='white'/></svg>") !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 20px !important;
  border: 1px solid gray !important;
}

.ol-btn-pin {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='8' r='5' fill='gray' stroke='gray' stroke-width='2'/><rect x='11' y='13' width='2' height='7' rx='1' fill='gray'/></svg>") !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 20px !important;
  border: 1px solid gray !important;
}

.ol-btn-erase {
  background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='gray' xmlns='http://www.w3.org/2000/svg'><rect x='2' y='10' width='9' height='3' rx='1' fill='gray'/><rect x='4' y='3' width='8' height='7' rx='2' fill='white' stroke='gray' stroke-width='1.5' transform='rotate(20 8 6.5)'/></svg>") !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 20px !important;
  border: 1px solid gray !important;
}

.ol-btn-draw-white {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='gray'><text x='50%' y='50%' font-size='14' font-family='Arial' font-weight='bold' text-anchor='middle' dominant-baseline='middle'>D</text></svg>") !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 20px !important;
  border: 1px solid gray !important;
}

.ol-btn-whiteline {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='gray'><text x='50%' y='50%' font-size='14' font-family='Arial' font-weight='bold' text-anchor='middle' dominant-baseline='middle'>W</text></svg>") !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 20px !important;
  border: 1px solid gray !important;
}

.ol-btn-toggle-controls:active,
.ol-zoom-in:active,
.ol-zoom-out:active,
.ol-btn-zoom-all:active,
.ol-btn-trash:active {
  background-color: gray !important;
}

.ol-message-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 25vw;
  background-color: rgba(255, 255, 255, 1);
  border: 1px solid gray;
  border-radius: 4px;
  padding: 5px 10px;
  font-size: 14px;
  font-weight: bold;
  z-index: 1000;
  display: flex;
  height: auto;
  min-height: 40px;
}