.map-container {
  /* min-height: 400px !important; */
}

.mapClass {
  border: none !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 100% !important;
  width: 100% !important;
}

.custom-mouse-position {
  background: #19994c !important;
  float: right !important;
  margin-left: 0 !important;
  color: white !important;
  padding: 2px !important;
  font-size: 0.6rem !important;
  border-bottom-left-radius: 2px !important;
  border-top-left-radius: 2px !important;
  bottom: 8px !important;
  position: absolute !important;
  right: 0 !important;
}

/* .ol-map {
    min-width: 600px !important;
    min-height: 500px !important;
    margin: 50px !important;
    height: 500px !important;
    width: "100%" !important;
  } */
/* .ol-control {
    position: absolute !important;
    background-color: rgba(255,255,255,0.4) !important;
    border-radius: 4px !important;
    padding: 2px !important;
  } */
.ol-full-screen {
  top: 4em !important;
  left: 0.5em !important;
  right: unset !important;
}

.layer-switcher.shown.ol-control {
  background-color: transparent !important;
}

.layer-switcher.shown.ol-control:hover {
  background-color: transparent !important;
}

.layer-switcher {
  position: absolute !important;
  top: 0.5em !important;
  text-align: left !important;
}

.ol-zoom-extent {
  top: 6em !important;
}

.layer-switcher.shown {
  bottom: 3em !important;
}

.layer-switcher .panel {
  /* padding: 0 1em 0 0 !important; */
  /* margin: 0 !important; */
  /* border: 1px solid rgba(0,0,0,0.3)  !important; */
  /* border-radius: 4px !important; */
  background-color: white !important;
  display: none !important;
  /* max-height: 100% !important; */
  height: auto !important;
  overflow-y: auto !important;
  /* margin-right: 36px !important; */

}

.layer-switcher.shown .panel {
  display: block !important;
}

.layer-switcher ul {
  margin: 0.5em !important;
}


.layer-switcher.shown.layer-switcher-activation-mode-click>button {
  right: 0 !important;
  left: unset !important;
  margin: 0 !important;
  border: none !important;
}

.layer-switcher li label {
  padding-left: 2.7em !important;
  padding-right: 1.2em !important;
  display: inline-block !important;
  margin-top: 1px !important;
  margin-bottom: 0 !important;
  font-size: 0.9rem !important;
}

.layer-switcher button {
  float: left !important;
  height: 1.375em !important;
  width: 1.375em !important;
  /* background-image: none !important; */
  background-image: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 512 512"><path fill="white" d="m12.41 148.02l232.94 105.67c6.8 3.09 14.49 3.09 21.29 0l232.94-105.67c16.55-7.51 16.55-32.52 0-40.03L266.65 2.31a25.607 25.607 0 0 0-21.29 0L12.41 107.98c-16.55 7.51-16.55 32.53 0 40.04zm487.18 88.28l-58.09-26.33l-161.64 73.27c-7.56 3.43-15.59 5.17-23.86 5.17s-16.29-1.74-23.86-5.17L70.51 209.97l-58.1 26.33c-16.55 7.5-16.55 32.5 0 40l232.94 105.59c6.8 3.08 14.49 3.08 21.29 0L499.59 276.3c16.55-7.5 16.55-32.5 0-40zm0 127.8l-57.87-26.23l-161.86 73.37c-7.56 3.43-15.59 5.17-23.86 5.17s-16.29-1.74-23.86-5.17L70.29 337.87L12.41 364.1c-16.55 7.5-16.55 32.5 0 40l232.94 105.59c6.8 3.08 14.49 3.08 21.29 0L499.59 404.1c16.55-7.5 16.55-32.5 0-40z"/></svg>') !important;
  background-repeat: no-repeat !important;
  /* background-color: #eee !important; */
  background-position: center !important;
  /* background-color: #19a1a1 !important; */

}

/* .layer-switcher button:before {
  content: '\f5fd' !important;
  font-family: 'Font Awesome 5 Free' !important;
  color: #ffffff !important;
} */

.layer-switcher.shown button {
  display: block !important;
}

.layer-switcher button:focus,
.layer-switcher button:hover {
  background-color: rgba(0, 60, 136, 0.7) !important;
}

/* .layer-switcher ul {
    padding-left: 1em !important;
    list-style: none !important;
} */

/* .layer-switcher li.group {
    padding-top: 5px !important;
} */

.layer-switcher li {
  margin-top: 0 !important;
}

.layer-switcher li.layer {
  display: table !important;
}

.layer-switcher li.layer label,
.layer-switcher li.layer input {
  display: table-cell !important;
  vertical-align: sub !important;
  font-size: 0.8rem !important;
}

.layer-switcher input {
  margin: 4px !important;
}

.layer-switcher.touch ::-webkit-scrollbar {
  width: 4px !important;
}

.layer-switcher.touch ::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3) !important;
  border-radius: 10px !important;
}

.layer-switcher.touch ::-webkit-scrollbar-thumb {
  border-radius: 10px !important;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5) !important;
}

.closeBtn {

  color: white !important;
  background-color: #070808 !important;
  padding: 3px !important;
  float: right !important;
  border: 0px !important;
  border-radius: 3px !important;
  font-size: 0.8rem !important;
  right: 57px !important;
  position: absolute !important;
}

.ol-popup {
  position: absolute !important;
  background-color: white !important;
  -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2)) !important;
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2)) !important;
  padding: 15px !important;
  border-radius: 10px !important;
  border: 1px solid #cccccc !important;
  bottom: 12px !important;
  left: -50px !important;
  min-width: 280px !important;
  z-index: 99 !important;
}

.ol-popup:after,
.ol-popup:before {
  top: 100% !important;
  border: solid transparent !important;
  content: " " !important;
  height: 0 !important;
  width: 0 !important;
  position: absolute !important;
  pointer-events: none !important;
}

.ol-popup:after {
  border-top-color: white !important;
  border-width: 10px !important;
  left: 48px !important;
  margin-left: -10px !important;
}

.ol-popup:before {
  border-top-color: #cccccc !important;
  border-width: 11px !important;
  left: 48px !important;
  margin-left: -11px !important;
}

.ol-popup-closer {
  text-decoration: none !important;
  position: absolute !important;
  top: 2px !important;
  right: 4px !important;
}

.ol-popup-closer:after {
  content: "X" !important;
}

#popup-content {
  font-size: 0.7rem !important;
}

.ol-control button {
  background-color: #19994c !important;
}

.ol-control button:hover,
.ol-control button:focus {
  background-color: rgba(25, 153, 76, 0.6) !important;
}

.ol-scale-line {
  background: rgba(25, 153, 76, 0.6) !important;
}

.popup-img-container a {
  display: inline-block !important;
  padding: 5px 5px 5px 0 !important;
}

.popup-img-container img {
  border: 1px solid black !important;
}

.popup-img-container {
  max-width: 280px !important;
}

.custom-form-label {
  font-size: 0.8rem;
  font-weight: 500;
  margin-bottom: 0rem;
}

.custom-form-control {
  font-size: 0.8rem;
}

.custom-control-checkbox::before .custom-control-checkbox::after {
  height: 0.8rem;
  width: 0.8rem;
}

.custom-panel {
  width: 400px;
  height: 600px;
  background-color: #fff;
  border: 1px solid #19994c;
  border-radius: 5px;
  position: absolute;
  top: 10px;
  left: 70px;
  /* display: block; */
}

.custom-panel-title {
  color: #fff;
  background: #19994c;
  padding: 2px 10px;
}

.close-panel-icon {
  position: absolute;
  font-weight: bold;
  top: 5px;
  right: 5px;
  color: white;
  cursor: pointer;
}

.custom-panel-body {
  margin: 10px;
  /* padding: 0px 0px 10px 0px; */
}

.queryresult-panel {
  width: 50%;
  height: 250px;
  background-color: #fff;
  border: 1px solid #19994c;
  border-radius: 5px;
  position: absolute;
  bottom: 40px;
  left: 50%;
  display: block;
}

.custom-panel-body .nav-link {
  padding: 4px 8px;
}

#measureToolPanel {
  top: 12rem;
}

#swipeLayerPanel {
  height: 250px;
}

#editFeaturePanel {
  height: 200px;
}

.custom-tool {
  left: 70px;
  position: absolute;
}

.panel-hide {
  left: -1250px;
  -webkit-transition: 0.7s ease !important;
  -moz-transition: 0.7s ease !important;
  -o-transition: 0.7s ease !important;
  transition: 0.7s ease !important;
}

.panel-show {
  /* left: 70px; */
  -webkit-transition: 0.7s ease !important;
  -moz-transition: 0.7s ease !important;
  -o-transition: 0.7s ease !important;
  transition: 0.7s ease !important;
}


#measureToolPanel span {
  display: inline-block;
  position: relative;
}

#measureToolPanel span i {
  display: block;
  height: 1em;
  background-repeat: no-repeat;
  background-position: center;
  margin: 2px;
}

#queryTab .nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
  color: #19994c;
}

#queryTab .nav-link {
  font-size: 0.9rem;

}

#queryTab .nav-link:hover {
  color: #19994c !important;
}

.queryResultCnt {
  font-size: 0.75rem;
}

#queryResultTable_wrapper,
#queryResultTable {
  font-size: 0.75rem !important;
}

#queryResultTable_wrapper table.dataTable thead th {
  background: #19994c !important;
  color: #fff !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
}

#queryResultTable thead {
  visibility: hidden;
}

#queryResultTable_wrapper table.dataTable thead th,
#queryResultTable_wrapper table.dataTable tbody td {
  padding: 3px 5px !important;
}

#queryBuilderPanel .card-body {
  padding: 0;
}

.status-msg {
  font-size: 0.8rem;
}

.query-tool {
  top: 8.0em;
  left: 0.5em;
}

.edit-tool {
  top: 10em;
  left: 0.5em;
}

.measure-tool {
  top: 12em;
  left: 0.5em;
}

.swipe-tool {
  top: 14em;
  left: 0.5em;
}

.custom-btn-primary {
  padding: 0.3em 1.3em !important;
  font-size: 14px !important;
}

.query-result-export {
  padding: 0.1em 0.5em !important;
  font-size: 12px !important;
  float: right;
}

.draw-aoi-icons span {
  height: 1.5em;
  width: 1.5em;
  background-color: #19994c;
  background-repeat: no-repeat;
  background-position: center;
  margin: 0 5px;
  display: inline-block;
  cursor: pointer;
}

.draw-aoi-icons span i {
  display: block;
  height: 1.175em;
  width: 1.175em;
  background-color: #19994c;
  background-repeat: no-repeat;
  background-position: center;
  margin: 2px;
}

.draw-point-icon {
  background-image: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="white" d="M176 256C176 211.8 211.8 176 256 176C300.2 176 336 211.8 336 256C336 300.2 300.2 336 256 336C211.8 336 176 300.2 176 256zM256 0C273.7 0 288 14.33 288 32V66.65C368.4 80.14 431.9 143.6 445.3 224H480C497.7 224 512 238.3 512 256C512 273.7 497.7 288 480 288H445.3C431.9 368.4 368.4 431.9 288 445.3V480C288 497.7 273.7 512 256 512C238.3 512 224 497.7 224 480V445.3C143.6 431.9 80.14 368.4 66.65 288H32C14.33 288 0 273.7 0 256C0 238.3 14.33 224 32 224H66.65C80.14 143.6 143.6 80.14 224 66.65V32C224 14.33 238.3 0 256 0zM128 256C128 326.7 185.3 384 256 384C326.7 384 384 326.7 384 256C384 185.3 326.7 128 256 128C185.3 128 128 185.3 128 256z"/></svg>');
}

.draw-line-icon {
  background-image: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="white" d="M384 160C366.3 160 352 145.7 352 128C352 110.3 366.3 96 384 96H544C561.7 96 576 110.3 576 128V288C576 305.7 561.7 320 544 320C526.3 320 512 305.7 512 288V205.3L342.6 374.6C330.1 387.1 309.9 387.1 297.4 374.6L191.1 269.3L54.63 406.6C42.13 419.1 21.87 419.1 9.372 406.6C-3.124 394.1-3.124 373.9 9.372 361.4L169.4 201.4C181.9 188.9 202.1 188.9 214.6 201.4L320 306.7L466.7 159.1L384 160z"/></svg>');
}

.draw-polygon-icon {
  background-image: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="white" d="M384.3 352C419.5 352.2 448 380.7 448 416C448 451.3 419.3 480 384 480C360.3 480 339.6 467.1 328.6 448H119.4C108.4 467.1 87.69 480 64 480C28.65 480 0 451.3 0 416C0 392.3 12.87 371.6 32 360.6V151.4C12.87 140.4 0 119.7 0 96C0 60.65 28.65 32 64 32C87.69 32 108.4 44.87 119.4 64H328.6C339.6 44.87 360.3 32 384 32C419.3 32 448 60.65 448 96C448 131.3 419.5 159.8 384.3 159.1L345.5 227.9C349.7 236.4 352 245.9 352 256C352 266.1 349.7 275.6 345.5 284.1L384.3 352zM96 360.6C105.7 366.2 113.8 374.3 119.4 384H328.6C328.6 383.9 328.7 383.8 328.7 383.7L292.2 319.9C290.8 319.1 289.4 320 288 320C252.7 320 224 291.3 224 256C224 220.7 252.7 192 288 192C289.4 192 290.8 192 292.2 192.1L328.7 128.3L328.6 128H119.4C113.8 137.7 105.7 145.8 96 151.4L96 360.6z"/></svg>');
}

.draw-circle-icon {
  background-image: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="white" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200z"/></svg>');
}

.draw-box-icon {
  background-image: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="white" d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm-6 400H54c-3.3 0-6-2.7-6-6V86c0-3.3 2.7-6 6-6h340c3.3 0 6 2.7 6 6v340c0 3.3-2.7 6-6 6z"/></svg>');
}

.clear-draw-icon {
  background-image: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="white" d="M497.941 273.941c18.745-18.745 18.745-49.137 0-67.882l-160-160c-18.745-18.745-49.136-18.746-67.883 0l-256 256c-18.745 18.745-18.745 49.137 0 67.882l96 96A48.004 48.004 0 0 0 144 480h356c6.627 0 12-5.373 12-12v-40c0-6.627-5.373-12-12-12H355.883l142.058-142.059zm-302.627-62.627l137.373 137.373L265.373 416H150.628l-80-80 124.686-124.686z"/></svg>');
}

.ol-swipe {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -ms-touch-action: none;
  touch-action: none;
}

.ol-swipe:before {
  content: "";
  position: absolute;
  top: -5000px;
  bottom: -5000px;
  left: 50%;
  width: 4px;
  background: #19994c;
  z-index: -1;
  -webkit-transform: translate(-2px, 0);
  transform: translate(-2px, 0);
}

.ol-swipe.horizontal:before {
  left: -5000px;
  right: -5000px;
  top: 50%;
  bottom: auto;
  width: auto;
  height: 4px;
}

.ol-swipe,
.ol-swipe button {
  cursor: ew-resize;
}

.ol-swipe.horizontal,
.ol-swipe.horizontal button {
  cursor: ns-resize;
}

.ol-swipe:after,
.ol-swipe button:before,
.ol-swipe button:after {
  content: "";
  position: absolute;
  top: 25%;
  bottom: 25%;
  left: 50%;
  width: 2px;
  background: #fff;
  transform: translate(-1px, 0);
  -webkit-transform: translate(-1px, 0);
}

.ol-swipe button:after {
  -webkit-transform: translateX(4px);
  transform: translateX(4px);
}

.ol-swipe button:before {
  -webkit-transform: translateX(-6px);
  transform: translateX(-6px);
}

#featureInfoPanel .carousel-control-prev,
#featureInfoPanel .carousel-control-next {
  bottom: unset;
  background: black;
  width: 0.8rem;
}

/* Full Screen Settings */
@media screen and (display-mode: fullscreen) {
  .ol-control button {
    height: 1.875em !important;
    width: 1.875em !important;
  }

  #popup-content {
    font-size: 0.8rem !important;
  }

  .custom-mouse-position {
    font-size: 0.8rem !important;
  }

  .ol-full-screen {
    top: 5em !important;
  }

  .ol-zoom-extent {
    top: 7.5em !important;
  }

  .query-tool {
    top: 10em;
  }

  .edit-tool {
    top: 12.5em;
  }

  .measure-tool {
    top: 15em;
  }

  .swipe-tool {
    top: 17.5em;
  }

  .custom-mouse-position {
    font-size: 0.8rem !important;
  }

  .query-tool,
  .edit-tool,
  .measure-tool,
  .swipe-tool,
  .queryresult-panel,
  #queryBuilderPanel,
  #editFeaturePanel,
  #measureToolPanel {
    visibility: visible;
  }
}

@media not all and (display-mode: fullscreen) {

  .query-tool,
  .edit-tool,
  .measure-tool,
  .swipe-tool,
  .queryresult-panel,
  #queryBuilderPanel,
  #editFeaturePanel,
  #measureToolPanel {
    visibility: hidden;
  }
}