/* ------------------ *
 * mg.result.LongList *
 * ------------------ */

.mg-result-longlist-ds-title {
  font-weight: bold;
}

iframe.mg-result-longlist-html {
  width: calc(100% - 1px);
}

/* ------------- *
 *      Map      *
 * ------------- */

body.fullscreen #main-container {
  width: 100%;
  height: 100%;
  border: none;
}

#main-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.main-inner {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.main-inner-top {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
}

.main-inner-bottom {
  width: 100%;
}

.main-inner #vertical-toolbar {
  display: none;
  height: 100%;
  overflow: hidden;
  width: 58px;
  position: relative;
}

.main-with-left .main-inner #left {
  position: relative;
  width: 40%;
  height: 100%;
  border-right: solid 1px #ccc;
}
.main-with-right .main-inner #right {
  position: relative;
  width: 40%;
  height: 100%;
  border-left: solid 1px #ccc;
}
.main-with-left.main-with-right .main-inner #left {
  width: 22%;
}
.main-with-left.main-with-right .main-inner #right {
  width: 22%;
}

@media only screen and (max-width: 768px) {
  .main-with-left .main-inner #left {
    width: 80%;
  }
  .main-with-right .main-inner #right {
    width: 80%;
  }
}

.main .main-inner #left,
.main .main-inner #right {
  width: 0;
  display: none;
}

.main-with-left .main-inner #left .mg-mask,
.main-with-right .main-inner #right .mg-mask {
  z-index: 200;
}


.main-inner #center {
  background-color: white;
  overflow: hidden;
  width: 100%;
  flex: 1;
}

#center,
#map-center {
  height: 100%;
  position: relative;
}

#map {
  width: 100%;
  height: 100%;
}

:root {
  --south-timemachine--height: 90px;
  --south-timemachine-collapsed--height: 3px;
  --map-bottom--height: 40px;
}

.main--with-south-timemachine > .main-inner-top {
  height: calc(100% - var(--south-timemachine--height));
}

.main--with-south-timemachine.mg-timemachine--collapsed > .main-inner-top {
  height: calc(100% - var(--south-timemachine-collapsed--height));
}

.south-timemachine {
  border-top: 1px solid #ccc;
  height: var(--south-timemachine--height);
  width: 100%;
}

#main-container.mg-toolbar-horizontal-medium-active #map-center {
  height: calc(100% - var(--map-bottom--height));
 }

#main-container #map-bottom {
  display: none;
}

#main-container.mg-toolbar-horizontal-medium-active #map-bottom {
  display: block;
  height: var(--map-bottom--height);
}

.ol-uncollapsible.ol-attribution img {
  max-width: inherit;
  width: auto;
}

.ol-rotate.ol-hidden {
  display: none;
}

#flash.flash-map {
  max-height: 80px;
  overflow-y: auto;
  position: absolute;
  bottom: 70px;
  z-index: 1029;
  width: 100%;
}

#map-messages .alert {
  max-height: 70px;
  overflow-y: auto;
}

body {
  height: 100%;
}

footer {
  text-align: center;
}

#map-messages {
  position: absolute;
  bottom: 20px;
  z-index: 1029;
  width: 100%;
}

#map-messages .alert {
  border-radius: 0;
  border-left-width: 0;
  border-right-width: 0;
  opacity: 0.9;
}

#map.drawing {
  cursor: crosshair;
}

#map.editing {
  cursor: pointer;
}

#geocoder {
  position: absolute;
  right: 44px;
  top: 5px;
  z-index: 1029;
}

#geocoder .input-group-btn {
  float: left;
}

#geocoder input {
  width: 260px;
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  border-bottom-right-radius: 2px;
  border-top-right-radius: 2px;
}

#geocoder .geocoder-results {
  max-height: 300px;
  max-width: 260px;
  width: 100%;
}

#geocoder button {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;

  /* border-radius: 0px !important; */
  border-top-left-radius: 2px;
  border-bottom-left-radius: 2px;
  width: 34px;
  padding: 6px 10px;
}

#attribution {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 1029;
  background-color: white;
  border-top: 1px solid #ddd;
  border-left: 1px solid #ddd;
  padding: 5px;
}

/* ----- any tree ------- */
.mg-tree ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  clear: both;
}

.mg-tree ul li button[disabled] {
  color: #808080;
}

.mg-tree button:focus {
  outline: 0;
}

.mg-tree > ul li.mg-tree-item {
  border: 2px solid white;
}

.mg-tree > ul li.mg-tree-item-highlighted {
  border: 2px solid var(--primary-color);
}

.mg-tree.modal .modal-dialog {
  margin-top: 50px;
  max-width: calc(100% - 24px);
  min-width: 157px;
}

/* ----- layer tree ------- */
.layer-tree {
  max-height: calc(100% - 20px);
  max-width: calc(100% - 24px);
  position: absolute;
  left: 10px;
  top: 10px;
  overflow: hidden;
  z-index: 1;
  -webkit-user-select: none; /* Chrome/Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE10+ */

  /* Rules below not implemented in browsers yet */
  -o-user-select: none;
  user-select: none;
}

/* Hack for IE10, fixes T1325 */
@media screen and (min-width: 0\0) {

  /* IE9 and IE10 rule sets go here */
.layer-tree {
  width: 350px;
}
}

.layer-tree .layer-tree-background-image {
  height: 100%;
  position: absolute;
  width: 100%;
}

.layer-tree > ul.collapse {
  max-height: calc(100% - 34px);
}

.layer-tree-header-outer,
.layer-tree > ul {

  /* Need to adjust padding of scrollbar width is changed */
  padding: 0 12px 0 0;

  /* 24px is a safe width to hide scrollbars in every browser/OS */
  width: calc(100% + 24px);
  overflow-y: scroll;
}

.layer-tree-header-outer {
  position: relative;
  padding-bottom: 6px;
}

/* Create fake scrollbar in Chrome and Safari (support webkit)
   Dependent from the width value in .layer-tree-header-outer,
   .layer-tree > ul class */
.layer-tree-header-outer::-webkit-scrollbar,
.layer-tree > ul::-webkit-scrollbar {
  width: 24px;
}

.layer-tree-header-inner,
.layer-tree-item {
  position: relative;
  width: 100%;
}

.layer-tree-header {
  padding: 6px;
  cursor: pointer;
}

.layer-tree-header,
.layer-tree-item-content {
  background-color: #fff;
  border: 1px solid rgba(100, 100, 100, 0.75);
  -webkit-box-shadow: 2px 2px 2px 0 rgba(100, 100, 100, 0.75);
  -moz-box-shadow: 2px 2px 2px 0 rgba(100, 100, 100, 0.75);
  box-shadow: 2px 2px 2px 0 rgba(100, 100, 100, 0.75);
  position: relative;
  width: 100%;
}

.layer-tree-item.layer-tree-item-unsupported-projection .layer-tree-item-content {
  color: #a94442;
}
.layer-tree-item.layer-tree-item-unsupported-projection .layer-tree-item-content:hover {
  cursor: help;
}

.layer-tree.no-editable-layer {
  top: 10px;
}

.layer-tree-styles,
.rule-tree-item {
  position: relative;
}

.layer-tree-clickable .layer-tree-item {
  cursor: pointer;
}

.rule-tree-data-header {
  display: flex;
}

.rule-tree-thumbnail {
  display: flex;
  justify-content: center;
  width: 34px;
  height: 24px;
  margin: 2px;
  -webkit-box-shadow: 1px 1px 1px 1px rgba(50, 50, 50, 0.75);
  -moz-box-shadow: 1px 1px 1px 1px rgba(50, 50, 50, 0.75);
  box-shadow: 1px 1px 1px 1px rgba(50, 50, 50, 0.75);
}

.rule-tree-hyperlink {
  color: #333;
  text-decoration: underline;
}

.rule-tree-label {
  padding: 4px;
  width: 210px;
  text-overflow: ellipsis;
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  margin-bottom: -10px;
}

.rule-tree .rule-tree-label {
  padding: 4px;
}

.rule-tree-selector {
  padding: 5px 10px 5px 5px;
}

.layer-tree-buttons {
  min-width: 89px;
  margin-right: -86px;
  text-align: right;
  float: right;
}

.rule-tree .layer-tree-buttons {
  width: 86px;
  margin-right: -86px;
  text-align: right;
  display: inline-block;
}

.layer-tree-buttons button {
  padding: 0 4px 0 4px;
  color: inherit;
  border: none;
}

.layer-tree-item {
  padding-bottom: 6px;
}

.layer-tree-item ul {
  padding: 0;
}

.layer-tree-item .layer-tree-selector {
  border: 2px solid white;
}

.layer-tree-item-select .layer-tree-selector {
  border: 2px solid var(--primary-color);
}

.layer-tree-data-header {
  padding: 6px;
  padding-right: 90px;
}

.layer-tree .btn-link.active {
  color: #31b0d5;
}

.layer-tree-item__layer-non-visible .show-legend-icon {
  display: none;
}

.show-legend-icon-inactive {
  color: #d3d3d3;
}

.collapsible-layer-tree.temp-tree .btn-link {
  margin-top: -3px;
  font-size: 20px;
}

.rule-tree-buttons {
  float: right;
  text-align: right;
}

.rule-tree-buttons button {
  padding: 4px;
  color: inherit;
  border: none;
}

.layer-tree-title {
  font-weight: bold;
}

.rule-tree-thumbnail {
  margin: 2px 10px 2px 2px;
}

.layer-tree-wms-icon {
  margin-right: 10px;
  margin-left: 3px;
}

.layer-tree-layer-name {
  font-family: Arial, sans-serif;
  margin: 0;
  max-width: 400px;
  text-overflow: ellipsis;
  overflow: hidden;
}

.layer-tree-wms-legend {
  line-height: 0px;
}

.layer-tree-wms-legend img {
  margin-left: 25px;
}

.empty-layertree-button {
  width: 26px;
  height: 18px;
  margin: 0;
  padding: 0;
  text-decoration: none;
}


.layer-tree-scroll-wrap {
  padding-bottom: 6px;
}

.layer-tree-scroll {
  text-align: center;
  display: block;
  background-color: #fff;
  border: 1px solid rgba(100, 100, 100, 0.75);
  -webkit-box-shadow: 2px 2px 2px 0 rgba(100, 100, 100, 0.75);
  -moz-box-shadow: 2px 2px 2px 0 rgba(100, 100, 100, 0.75);
  box-shadow: 2px 2px 2px 0 rgba(100, 100, 100, 0.75);
  position: relative;
  width: calc(100%);
}

.modal .collapsible-layer-tree {
  padding-left: 0;
}

@media (max-width: 395px) {
.collapsible-layer-tree.collapse,
.collapsible-layer-tree.collapsing {
  position: relative;
}

.layer-tree {
  width: calc(100% - 66px);
}

.modal.layer-tree {
  width: 100%;
}

.rule-tree-label {
  width: auto;
  min-width: 100px;
  max-width: calc(100% - 55px);
}

.layer-tree-header {
  width: 157px;
}

#geocoder input {
  width: 200px;
}

.layer-tree-scroll {
  width: calc(100% - 40px);
}
}

.empty-layertree-button:hover {
  text-decoration: none;
  cursor: default;
}

/* ----- feature edition/query modals ------- */

#get-feature-info .modal-body table th {
  text-align: center;
  padding: 8px;
}

#get-feature-info .modal-body table tr td:first-child {
  font-weight: bold;
}

#get-feature-info .modal-body table tr td:last-child {
  text-align: center;
}

#get-feature-info .modal-body table td {
  width: 50%;
}

#get-feature-info .modal-body {
  position: absolute;
  overflow: auto;
  width: 100%;
  top: 0;
  bottom: 65px;
}

#get-feature-info .modal-footer {
  position: absolute;
  width: 100%;
  bottom: 0;
}

#get-feature-info .modal-content {
  position: absolute;
  width: 100%;
  top: 0;
  bottom: 0;
}

#get-feature-info .modal-dialog {
  position: absolute;
  max-height: 80%;
  top: 20px;
  bottom: 10px;
  left: 10px;
  right: 10px;
  margin-top: 0;
}

#get-feature-info.modal.in {
  position: absolute;
}

.modal-dialog {
  height: 500px;
  margin-top: 70px;
  -webkit-transition: width 400ms cubic-bezier(0.075, 0.82, 0.165, 1), height 400ms cubic-bezier(0.075, 0.82, 0.165, 1);
  -moz-transition: width 400ms cubic-bezier(0.075, 0.82, 0.165, 1), height 400ms cubic-bezier(0.075, 0.82, 0.165, 1);
  -o-transition: width 400ms cubic-bezier(0.075, 0.82, 0.165, 1), height 400ms cubic-bezier(0.075, 0.82, 0.165, 1);
  transition: width 400ms cubic-bezier(0.075, 0.82, 0.165, 1), height 400ms cubic-bezier(0.075, 0.82, 0.165, 1);
}

.modal-dialog.mg-modal-dialog--fullscreen,
.modal-dialog.mg-modal-dialog--fullscreen .modal-content {
  height: calc(100vh - 100px);
  width: calc(100% - 4px);
  margin: 55px auto 0;
}

.modal-body {
  max-height: 400px;
  overflow: auto;
}

.modal-description {
  margin-bottom: 10px;
}

@media screen and (max-height: 600px) {
.modal-body {
  max-height: 250px;
}
}

.shrinked-modal {
  display: none;
}

.shrinked-modal .modal-dialog {
  margin-top: 59px;
  width: 40px;
  height: 34px;
  background-color: white;
  border-radius: 4px;
  border: 1px solid #ccc;
  margin-right: 175px;
}

body.fullscreen .shrinked-modal .modal-dialog {
  margin-top: 10px;
}

.shrinked-modal .modal-dialog .modal-content {
  display: none;
}

#edit-geometry-panel {
  position: absolute;
  top: 10px;
  right: 304px;
  width: 40px;
  height: 34px;
  z-index: 1050;
  display: none;
}

.ol-viewport .ol-control button:focus {
  background-color: white;
  color: #333;
}

.mg-control-back-to-map-list {
  bottom: 25px;
  left: 10px;
}

/* -------------------------- *
 * PopOver - popup in the map *
 * -------------------------- */

.ol-overlaycontainer .popover,
.ol-overlaycontainer-stopevent .popover {
  width: 300px;
  max-width: 300px;
  z-index: auto;
}

.mg-popup-close {
  border: 0;
  margin: 0;
  padding: 4px;
  position: absolute;
  right: 0;
  top: 0;
}

.ol-viewport .popover .popover-content .ol-unselectable {
  -webkit-touch-callout: inherit;
  -webkit-user-select: inherit;
  -khtml-user-select: inherit;
  -moz-user-select: inherit;
  -ms-user-select: inherit;
  user-select: inherit;
  -webkit-tap-highlight-color: inherit;
}


/* EditExtent control -- FIXME, set top accordingly */
.ol-viewport .ol-overlaycontainer > .mg-control-editextent,
.ol-viewport .ol-overlaycontainer-stopevent > .mg-control-editextent {
  right: 10px;
  top: 9.9em;
}

.ol-viewport .mg-control-editextent.active button {
  color: white;
  background-color: #39b9eb;
}

.popover.mg-popup-query-result {
  padding: 25px 4px 20px 4px;
  width: 430px;
  max-width: 430px;
}

.mg-popup-query-result .modal-body {
  height: inherit;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.mg-popup-query-result .modal-body::-webkit-scrollbar {
  background-color: transparent;
  width: 0;
}

.mg-form-field-staticvideo a,
.mg-mg-form-field-staticvideo video {
  display: block;
}

.mg-popup-query-result .modal-dialog {
  width: 300px;
}

.mg-popup-query-result .modal-dialog .ui-resizable {
  max-height: 100%;
  max-width: 100%;
}

#map .modal.mg-popup-query-result {
  bottom: 5px;
  left: auto;
  right: 5px;
  top: auto;
}

/* ----------------------------------------------------------------- *
 * mg.modal - Position modal depend of the toolbars activate *
/* ----------------------------------------------------------------- */

/* Large toolbars */

#main-container.mg-toolbar-horizontal-large-active #map .modal.mg-popup-query-result {
  bottom: 60px;
}

#main-container.mg-toolbar-vertical-large-active #map .modal.mg-popup-query-result {
  right: 60px;
}

/* Medium toolbars */

#main-container.mg-toolbar-horizontal-medium-active #map .modal.mg-popup-query-result {
  bottom: 50px;
}

#main-container.mg-toolbar-vertical-medium-active #map .modal.mg-popup-query-result {
  right: 50px;
}

/* Small toolbars */

#main-container.mg-toolbar-horizontal-small-active #map .modal.mg-popup-query-result {
  bottom: 40px;
}

#main-container.mg-toolbar-vertical-small-active #map .modal.mg-popup-query-result {
  right: 40px;
}

.mg-popup-query-result .popover-content {
  max-height: 240px;
  overflow: auto;
}

.mg-popup-panel .mg-result-longlist__btns,
.mg-popup-query-result .modal-content .mg-result-longlist__btns,
.mg-popup-query-result .popover-content .mg-result-longlist__btns {
  float: right;
}


/* -------------- *
 * mg.popup.Panel *
 * -------------- */

.mg-popup-panel {}

.mg-popup-panel-content .table {
  margin: 0 0 1rem 0;
}

.mg-popup-panel-content .table:last-child {
  margin: 0;
}

.mg-popup-panel-content .mg-result-longlist-recordsfound {
  display: none;
}

.mg-popup-panel-container {
  background-color: white;
  padding: 0.1rem;
  width: 30rem;
  -webkit-box-shadow: 2px 2px 2px 0 rgba(100, 100, 100, 0.75);
  -moz-box-shadow: 2px 2px 2px 0 rgba(100, 100, 100, 0.75);
  box-shadow: 2px 2px 2px 0 rgba(100, 100, 100, 0.75);
}

.mg-popup-panel-container > div {
  margin: 0.3rem;
}

.mg-popup-panel-header,
.mg-popup-panel-footer {
  background-color: #3c3d3e;
  border: 0.1rem solid #ccc;
  color: white;
  padding: 0.5rem;
}

.mg-popup-panel-header-title {
  display: inline-block;
  font-weight: bold;
  position: relative;
  width: calc(100% - 1rem);
}

.mg-popup-panel-btn-close {
  color: white;
  display: inline-block;
  position: relative;
  width: 1rem;
}

.mg-popup-panel-btn-close:hover {
  color: #eee;
}

.mg-popup-panel-content {
  overflow-y: auto;
  max-height: 15rem;
  min-height: 5rem;
}

.mg-popup-panel-arrow {
  border-left: 1.5rem solid transparent;
  border-right: 1.5rem solid transparent;
  border-top: 1.5rem solid #fff;
  height: 0;
  margin: 0 auto;
  width: 0;
}


/* ----------------------------------------------------------------- *
 * mg.popup.Panel - Used as WMSGetFeatureInfo query result container *
/* ----------------------------------------------------------------- */

/* HEIGHT management */

@media (min-height: 256px) {
.mg-popup-panel-query .mg-popup-panel-content {
  max-height: 11rem;
}
}

@media (min-height: 320px) {
.mg-popup-panel-query .mg-popup-panel-content {
  max-height: 14rem;
}
}

@media (min-height: 384px) {
.mg-popup-panel-query .mg-popup-panel-content {
  max-height: 19rem;
}
}

@media (min-height: 512px) {
.mg-popup-panel-query .mg-popup-panel-content {
  max-height: 25rem;
}
}



/* WIDTH management */
.main-with-left .mg-popup-panel-query .mg-popup-panel-container {
  width: 43rem;
}

@media (min-width: 896px) {
.main-with-left .mg-popup-panel-query .mg-popup-panel-container {

  /* width: 51rem; */
  width: 43rem;
}
}

@media (min-width: 1024px) {
.main-with-left .mg-popup-panel-query .mg-popup-panel-container {

  /* width: 60rem; */
  width: 43rem;
}
}

.main .mg-popup-panel-query .mg-popup-panel-container {
  width: 24rem;
}

@media (min-width: 320px) {
.main .mg-popup-panel-query .mg-popup-panel-container {
  width: 29rem;
}
}

@media (min-width: 384px) {
.main .mg-popup-panel-query .mg-popup-panel-container {
  width: 36rem;
}
}

@media (min-width: 512px) {
.main .mg-popup-panel-query .mg-popup-panel-container {

  /* width: 50rem; */
  width: 43rem;
}
}

@media (min-width: 640px) {
.main .mg-popup-panel-query .mg-popup-panel-container {

  /* width: 62rem; */
  width: 43rem;
}
}

/* --------------------------------*
 * EditExtent control, in a tree ! *
 * -------------------------------- */

.ol-viewport .mg-tree .mg-control-editextent {
  border: 0;
  position: relative;
  float: right;
  display: block;
  margin: -2px 4px 0 0;
  padding: 0;
}

.ol-viewport .mg-tree .mg-control-editextent button {
  border: 0;
  height: 24px;
  margin: 0;
  width: 24px;
  font-size: 0.8em;
}

.ol-overlaycontainer .popover.mg-control-editextent-popup-initial,
.ol-overlaycontainer-stopevent .popover.mg-control-editextent-popup-initial,
.ol-overlaycontainer .popover.mg-control-editextent-popup-max,
.ol-overlaycontainer-stopevent .popover.mg-control-editextent-popup-max {
  text-align: center;
  width: 220px;
}

.ol-overlaycontainer .popover.mg-control-editextent-popup-initial,
.ol-overlaycontainer-stopevent .popover.mg-control-editextent-popup-initial {
  color: #279b61;
}

.ol-overlaycontainer .popover.mg-control-editextent-popup-max,
.ol-overlaycontainer-stopevent .popover.mg-control-editextent-popup-max {
  color: #933;
}

/* SetExtent control (same level as print) */
.ol-viewport .ol-overlaycontainer > .mg-control-setextent,
.ol-viewport .ol-overlaycontainer-stopevent > .mg-control-setextent {
  right: 10px;
  top: 9.9em;
}

/* Measure control */
#map .mg-control-measure.drawing .mg-control-measure-button,
#map .mg-control-measure.finished .mg-control-measure-button {
  color: white;
}

#map .mg-control-measure.drawing .mg-control-measure-button {
  background-color: #39b9eb;
}

#map .mg-control-measure.finished .mg-control-measure-button {
  background-color: #ea3d3a;
}

#vertical-toolbar .mg-control-measure.finished .mg-control-measure-button {
  background-color: #ea3d3a;
}

#map .ol-overlaycontainer .ol-overlay-container > .tooltip,
#map .ol-overlaycontainer-stopevent .ol-overlay-container > .tooltip {
  position: relative;
  background: rgba(0, 0, 0, 0.9);
  border-radius: 4px;
  color: white;
  padding: 4px 8px;
  opacity: 0.7;
  white-space: nowrap;
  z-index: auto;
}

#map .ol-overlaycontainer .ngeo-tooltip-measure,
#map .ol-overlaycontainer-stopevent .ngeo-tooltip-measure {
  opacity: 1;
  font-weight: bold;
}

#map .ngeo-tooltip-measure::before,
#map .ngeo-tooltip-static::before {
  border-top: 6px solid rgba(0, 0, 0, 0.5);
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
  content: "";
  position: absolute;
  bottom: -6px;
  margin-left: -7px;
  left: 50%;
}

#map .ngeo-tooltip-static::before {
  border-top-color: #fc3;
}

.mg-control-measure .gmf-icon-line,
.mg-control-measure-button .gmf-icon-line {
  font-weight: 100;
  font-size: 12px;
}

.mg-control-measure-button .gmf-icon-line {
  font-size: 15px;
}

/* Route measure control */
#map .mg-route-measure-control.drawing .mg-route-measure-control-button,
#map .mg-route-measure-control.finished .mg-route-measure-control-button {
  color: white;
}

#map .mg-route-measure-control.drawing .mg-route-measure-control-button {
  background-color: #39b9eb;
}

/* Mouse position control */
.ol-viewport .mg-control-mouseposition {
  background-color: white;
  background-color: rgba(255, 255, 255, 0.6);
  position: relative;
}

/* NorthArrow control */
.mg-control-northarrow {
  background-image: url('/static/img/north-arrow.png');
  height: 30px;
  margin-bottom: 10px;
  position: relative;
  width: 30px;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}


/* Rotation control */

.mg-control-rotation .row {
  margin-left: 0;
  margin-right: 0;
  margin: 0px;
}

.mg-control-rotation .col-md-12 {
  padding: 0;
}

.mg-control-rotation .slider {
  width: 80px !important;
}

/* SingleDraw control */

.mg-control-singledraw.drawing button,
.mg-control-singledraw.finished button {
  color: white;
}

.mg-control-singledraw.drawing button:not([disabled]) {
  background-color: #39b9eb;
}

.mg-control-singledraw.finished button:not([disabled]) {
  background-color: #ea3d3a;
}

.mg-control-singledraw button[disabled] {
  color: lightgrey;
}

.mg-control-singledraw a {
  cursor: pointer;
}

.mg-component-dropdown a span {
  margin-right: 6px;
  font-size: 15px;
}

.mg-component-dropdown > button .mg-fa {
  font-size: 15px;
}


/* Bottom Popup control */
.mg-control-bottomPopup {
  background-color: white;
  width: 100%;
  height: 140px;
  margin-top: -140px;
  padding: 10px;
  overflow-y: auto;
  position: relative;
  z-index: 100;
  -webkit-box-shadow: 0 -2px 3px 0 rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 -2px 3px 0 rgba(0, 0, 0, 0.1);
  box-shadow: 0 -2px 3px 0 rgba(0, 0, 0, 0.1);
}

/* Geolocate control */

#map .mg-control-geolocate.active button,
#map .mg-control-geolocate.following button,
#map .mg-control-geolocate.pending button {
  color: white;
}

#map .mg-control-geolocate.pending button {
  background-color: #fac802;
}

#map .mg-control-geolocate.following button {
  background-color: #fac802;
}

#map .mg-control-geolocate.active button {
  background-color: #00c4ff;
}

/* Feature Buffer Control */
#map .mg-featurebuffer-button.active button {
  background-color: #39b9eb;
  color: white;
}

#map .mg-featurebuffer-button button:hover {
  background-color: var(--primary-color);
  color: white;
}

.mg-featurebuffer-panel-table-row:hover {
  color:var(--primary-color);
  cursor: pointer;
}

.mg-featurebuffer-panel-table-row-active td {
  background-color: #D7E4F9;
}

.mg-featurebuffer-panel-showhidebutton {
  float: right;
  margin-bottom: 10px;
}

/* EditFeatureSingle control */
#map .mg-editfeature-singlecontrol.activedraw .mg-editfeature-singlecontrol-draw,
#map .mg-editfeature-singlecontrol.activemodify .mg-editfeature-singlecontrol-modify {
  color: white;
  background-color: var(--primary-color);
}


/* Click control */
#map .mg-control-click.active button {
  color: white;
  background-color: #00c4ff;
}

/* Follow control */
.ol-viewport .mg-follow-control.active button {
  color: white;
  background-color: #39b9eb;
}

/* getFeatureInfo */

#map .mg-control-query {
  right: 55px;
  top: 50px;
}

.mg-control-query.active button {
  color: white;
}

.mg-control-query.active button {
  background-color: #39b9eb;
}


/* Sketch, TimeMachine, Undock buttons control */
#map .mg-deadreckoning-button.active button,
#map .mg-qwiz-global-spatialfilter-advancedbutton.active button,
#map .mg-qwiz-global-spatialfilter-simplebutton.active button,
#map .mg-sketch-button.active button,
#map .mg-timemachine-collapsebutton button,
#map .mg-printPDF-button.active button,
#map .mg-basemapswitcher.active button,
#map .mg-basemapswitcher.active button
 {
  background-color: #39b9eb;
  color: white;
}

.mg-qwiz-global-spatialfilter--hasfilter #map .mg-qwiz-global-spatialfilter-advancedbutton button {
  background-color: #8339fa;
  color: white;
}

.main--with-south-timemachine.mg-timemachine--collapsed #map .mg-timemachine-collapsebutton button {
  background-color: white;
  color: #333;
}

#map .mg-deadreckoning-panel-actionbuttons,
#map .mg-featurebuffer-panel-actionbuttons,
#map .mg-sketch-editpanel-actionbuttons {
  text-align: right;
}

#map .mg-deadreckoning-panel-actionbuttons .btn,
#map .mg-featurebuffer-panel-actionbuttons .btn {
  margin-left: 10px;
}


/* DragAndDrop control */
#map .mg-addfiles-control.empty span.glyphicon-trash,
.mg-toolbar-vertical .mg-addfiles-control.empty span.glyphicon-trash {
  display: none;
}

#map .mg-addfiles-control.notempty span.glyphicon-import,
.mg-toolbar-vertical .mg-addfiles-control.notempty span.glyphicon-import {
  display: none;
}

#map .mg-addfiles-control-btn-label {
  background-color: #fff;
  border: 1px solid #ccc;
  color: #333;
  height: 34px;
  line-height: 34px;
  margin: 1px;
  text-align: center;
  width: 34px;
}

#map .mg-addfiles-control.notempty .mg-addfiles-control-btn-label {
  color: white;
  background-color: var(--primary-color);
}

#map .mg-addfiles-control-btn-label:hover {
  background-color: var(--primary-color);
  color: white;
  cursor: pointer;
}

#map .mg-addfiles-control.notempty .mg-addfiles-control-btn-label:hover {
  background-color: #d9534f;
}

#mg-addfiles-control-btn-id {
  display: inline-block;
  max-height: 0.1px;
  max-width: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  z-index: -1;
}

/* Attribution control */
.mg-datasource-googlemaps .ol-attribution {
  margin-bottom: 15px;
}

.ol-attribution.ol-uncollapsible {
  height: 1.3em;
}

.ol-attribution ul {
  font-size: 0.8em;
}

/* Scale Line control */
.ol-scale-line {
  bottom: auto;
  left: auto;
}

#map .ol-scale-line,
#preview .ol-scale-line {
  bottom: auto;
  left: auto;
  position: relative;
}

/* Scale control */
.ol-viewport .mg-control-scale-text {
  background-color: white;
  background-color: rgba(255, 255, 255, 0.6);
}

.ol-viewport .mg-control-scale select {
  background-color: white;
  border-radius: 2px;
}

/* AreasOfInterest control */
.mg-areasofinterest-dropdown {
  background-color: white;
  border-radius: 2px;
}

.mg-areasofinterest-editor {
  background-color: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(100, 100, 100, 0.75);
  bottom: 50px;
  display: flex;
  flex-direction: column;
  max-height: calc(80% - 100px);
  padding: 2px 5px;
  position: absolute;
  right: 5px;
  -webkit-box-shadow: 2px 2px 2px 0 rgba(100, 100, 100, 0.75);
  -moz-box-shadow: 2px 2px 2px 0 rgba(100, 100, 100, 0.75);
  box-shadow: 2px 2px 2px 0 rgba(100, 100, 100, 0.75);
}

.mg-areasofinterest-editor-items {
  flex: 1;
  overflow-y: auto;
  position: relative;
}

.mg-areasofinterest-editor-header,
.mg-areasofinterest-editor-item {
  margin: 2px;
}

.mg-areasofinterest-editor-btn {
  height: 28px;
  width: 32px;
}

.mg-areasofinterest-editor-close {
  float: right;
}

/* Current zoom control */
.ol-viewport .mg-control-currentzoom,
#preview .mg-control-currentzoom {
  background-color: white;
  background-color: rgba(255, 255, 255, 0.6);
}

.mg-modal-editfeature-splitting button[data-action="save"] {
  display: none;
}

/* LoadingPanel control */

.mg-control-loadingpanel {
  height: 20px;
  left: 2px;
  top: 2px;
  width: 20px;
}

.mg-control-loadingpanel.panel {
  border: 2px solid white;
  opacity: 0.4;
}

.mg-control-loadingpanel.panel.inactive {
  background-color: green;
}

.mg-control-loadingpanel.panel.active {
  background-color: red;
}

.mg-control-loadingpanel.spinner {
  position: absolute;
  background-color: rgba(255, 255, 255, 5);
  border-radius: 50%;
  line-height: 20px;
  text-align: center;
  transition: opacity 0.5s ease-in 0.1s;
  z-index: 2;
}

.mg-control-loadingpanel.spinner.inactive {
  opacity: 0;
}

.mg-control-loadingpanel.spinner.active {
  opacity: 0.8;
}

@media not screen {
.ol-control.mg-control-loadingpanel {
  display: none;
}
}

/* Permalink control */
#qrcode {
  margin: 0px auto;
  height: 250px;
  width: 250px;
}

/* Dropdown control */

.mg-control-dropdown {
  font-size: larger;
}

.mg-control-dropdown div.mg-control-dropdown-header {
  background: #c6ccd3;
  font-size: larger;
  position: relative;
}

.mg-control-dropdown .mg-control-dropdown-header-icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  right: 0.2em;
}

.mg-control-dropdown .mg-control-dropdown-drawer {
  overflow-y: hidden;
  position: relative;
}

.mg-control-dropdown .mg-control-dropdown-list {
  bottom: 0;
  right: 0;
  left: 0;
  position: absolute;
}

.mg-control-dropdown .mg-control-dropdown-list-element {
  background: #324b65;
  color: white;
  margin-top: 3px;
}

.mg-control-dropdown .mg-control-dropdown-list-element:hover {
  background: #4b627a;
}

.mg-control-dropdown div.mg-control-dropdown-header,
.mg-control-dropdown .mg-control-dropdown-list-element {
  cursor: pointer;
  padding: 0 0.2em;
}

.mg-control-dropdown .mg-control-dropdown-list-element.mg-control-dropdown-selected-item {
  background: #919eab;
  color: black;
}

.mg-datasource-googlemaps {
  height: 100%;
  width: 100%;
}

/* Override Google Maps's style for our controls */
.gm-style .ol-viewport {
  font-family: sourcesans, sans-serif;
  font-size: 14px;
}

@media print {
.layer-tree-scroll-wrap,
.layer-tree-header-outer {
  display: none;
}

.layer-tree {
  overflow: visible;
}

.layer-tree-buttons {
  display: none;
}

.ol-control {
  display: block;
}

.ol-attribution ul li {
  background: rgba(255, 255, 255, 0.8) !important;
}

.ol-attribution a::after {
  content: normal;
}

.layer-tree-item {
  padding: 0;
  background-image: url('/static/img/blank_white.png') !important;
}
}

/* Dropdown component */
.mg-component-dropdown.dropdown-menu .selected {
  font-weight: bold;
}

/* --------------------------- *
 * mg.interaction.MouseoverUTFGrid *
 * --------------------------- */

.mg-utfgrid-query-result-overlay .mg-result-longlist-recordsfound {
  display: none;
}

.mg-utfgrid-query-result-overlay .mg-result-longlist-resultctn table > th {
  background-color: white;
}

.mg-utfgrid-query-result-overlay {
  background-color: white;
}

/* ----------------------------------------- *
 *      NoBrowsableDataSource component      *
 * ----------------------------------------- */

.mg-component-nobrowsabledatasource {
  height: 100%;
  overflow: auto;
  padding: 0 10px;
}


/* -------------------------- *
 *  LeftPanelCollapse control *
 * -------------------------- */

.mg-map-panel-collapse-inmap .mg-map-panel-collapse {
  position: absolute;
  bottom: 35px;
  padding: 20px 1px 20px 4px;
  border: 1px solid lightgrey;
  border-radius: 0 6px 6px 0;
  font-size: 9px;
  transition: left 0.25s;
  left: -4px;
  outline: 0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  background: #e9e9e9;
  background: -o-linear-gradient(left, #f5f5f5 50%, #e9e9e9 100%);
  background: -ms-linear-gradient(left, #f5f5f5 50%, #e9e9e9 100%);
  background: -moz-linear-gradient(left, #f5f5f5 50%, #e9e9e9 100%);
  background: -webkit-linear-gradient(left, #f5f5f5 50%, #e9e9e9 100%);
  background: linear-gradient(left, #f5f5f5 50%, #e9e9e9 100%);
}

.mg-map-panel-collapse-inmap .mg-map-panel-collapse .mg-map-panel-collapse-label {
  display: none;
}

/* At smaller size, the collapse button displays "Data" and is much larger. */
@media only screen and (max-width: 768px) {
  .mg-map-panel-collapse-inmap .mg-map-panel-collapse {
    padding: 4px;
  }

  .mg-map-panel-collapse-inmap .mg-map-panel-collapse .mg-map-panel-collapse-label {
    display: inline-block;
    font-size: 16px;
    margin-right: 4px;
    margin-left: 4px;
    vertical-align: middle;
  }

  .mg-map-panel-collapse-inmap .mg-map-panel-collapse .glyphicon {
    vertical-align: middle;
  }

  .mg-map-panel-collapse-inmap .main-with-left #left {
    width: 85%;
  }

  /* And the map itself becomes a mere preview, so we hide all the controls */
  .mg-map-panel-collapse-inmap .main-with-left #center {
    width: 15%;
  }

  .mg-map-panel-collapse-inmap .main-with-left .mg-left-uncollapsed #map .mg-map-panel-collapse .glyphicon,
  .mg-map-panel-collapse-inmap .main-with-left .mg-left-uncollapsed #map .mg-map-panel-collapse .mg-map-panel-collapse-label,
  .mg-map-panel-collapse-inmap .main-with-left .mg-left-uncollapsed .mg-layer-tree,
  .mg-map-panel-collapse-inmap .main-with-left .mg-left-uncollapsed #geocoder,
  .mg-map-panel-collapse-inmap .main-with-left .mg-left-uncollapsed .mg-controlcontainer {
    display: none;
  }

  /* Now, take that button and transform it into a mask */
  .mg-map-panel-collapse-inmap .main-with-left.mg-left-uncollapsed #map .mg-map-panel-collapse {
    width: 100%;
    height: 100%;
    padding: 0;
    border-radius: 0;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background: inherit;
    background-color: rgba(0, 0, 0, 0.6);
  }

  .mg-map-panel-collapse-inmap .mg-left-uncollapsed .south-timemachine,
  .mg-map-panel-collapse-inmap .mg-right-uncollapsed #right {
    display: none;
  }

  .mg-map-panel-collapse-inmap .mg-left-uncollapsed.main--with-south-timemachine > #center,
  .mg-map-panel-collapse-inmap .mg-left-uncollapsed.main--with-south-timemachine > #map-center,
  .mg-map-panel-collapse-inmap .mg-left-uncollapsed.main--with-south-timemachine > #left {
    height: 100%;
  }
}

.mg-map-panel-collapse-inmap .mg-map-panel-collapse:hover {
  left: -1px;
}


/* -------------------------- *
 *  RightPanelCollapse control *
 * -------------------------- */

 .mg-map-panel-collapse-inmap .mg-map-panel-collapse {
  position: absolute;
  bottom: 35px;
  padding: 20px 1px 20px 4px;
  border: 1px solid lightgrey;
  border-radius: 0 6px 6px 0;
  font-size: 9px;
  transition: right 0.25s;
  outline: 0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  background: #e9e9e9;
  background: -o-linear-gradient(left, #f5f5f5 50%, #e9e9e9 100%);
  background: -ms-linear-gradient(left, #f5f5f5 50%, #e9e9e9 100%);
  background: -moz-linear-gradient(left, #f5f5f5 50%, #e9e9e9 100%);
  background: -webkit-linear-gradient(left, #f5f5f5 50%, #e9e9e9 100%);
  background: linear-gradient(left, #f5f5f5 50%, #e9e9e9 100%);
}

.mg-map-panel-collapse-inmap .mg-map-panel-collapse .mg-map-panel-collapse-label {
  display: none;
}

/* At smaller size, the collapse button displays "Data" and is much larger. */
@media only screen and (max-width: 768px) {
  .mg-map-panel-collapse-inmap .mg-map-panel-collapse {
    padding: 4px;
  }

  .mg-map-panel-collapse-inmap .mg-map-panel-collapse .mg-map-panel-collapse-label {
    display: inline-block;
    font-size: 16px;
    margin-right: 4px;
    margin-left: 4px;
    vertical-align: middle;
  }

  .mg-map-panel-collapse-inmap .mg-map-panel-collapse .glyphicon {
    vertical-align: middle;
  }

  .mg-map-panel-collapse-inmap .main-with-right #right {
    width: 85%;
  }

  /* And the map itself becomes a mere preview, so we hide all the controls */
  .mg-map-panel-collapse-inmap .main-with-right #center {
    width: 15%;
  }

  .mg-map-panel-collapse-inmap .main-with-right #map .mg-map-panel-collapse .glyphicon,
  .mg-map-panel-collapse-inmap .main-with-right #map .mg-map-panel-collapse .mg-map-panel-collapse-label,
  .mg-map-panel-collapse-inmap .main-with-right .mg-controlcontainer {
    display: none;
  }

  /* Now, take that button and transform it into a mask */
  .mg-map-panel-collapse-inmap .main-with-right #map .mg-map-panel-collapse {
    width: 100%;
    height: 100%;
    padding: 0;
    border-radius: 0;
    right: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background: inherit;
    background-color: rgba(0, 0, 0, 0.6);
  }

  .mg-map-panel-collapse-inmap .mg-right-uncollapsed .south-timemachine,
  .mg-map-panel-collapse-inmap .mg-right-uncollapsed #left {
    display: none;
  }

  .mg-map-panel-collapse-inmap .mg-right-uncollapsed.main--with-south-timemachine > #center,
  .mg-map-panel-collapse-inmap .mg-right-uncollapsed.main--with-south-timemachine > #map-center,
  .mg-map-panel-collapse-inmap .mg-right-uncollapsed.main--with-south-timemachine > #right {
    height: 100%;
  }
}

.mg-map-panel-collapse-inmap .mg-map-panel-collapse:hover {
  left: -1px;
}

.main-with-right #geocoder {
  right: 56px;
}

/* TODO: Handle case when both panels are enabled */


/* ---------------------------- *
 * GoogleMaps BaseLayerSwitcher *
 * ---------------------------- */

.mg-control-googlemapsbaselayerswitcher {
  background-color: rgba(255, 255, 255, 0.4);
  border-radius: 4px;
  padding: 2px;
}

.mg-control-googlemapsbaselayerswitcher:hover {
  background-color: rgba(255, 255, 255, 0.6);
}


/* ----------------- *
 * BaseLayerSwitcher *
 * ----------------- */

.mg-control-baselayerswitcher .dropdown-menu {
  left: auto;
  right: 0;
}

.mg-control-baselayerswitcher .dropdown-menu > li > a {
  display: flex;
  padding: 0.3rem;
}

.mg-control-baselayerswitcher .dropdown-menu > li > a::before {
  content: '';
  text-align: center;
  width: 1.28571429em;
}

.mg-control-baselayerswitcher .dropdown-menu > li.mg-control-baselayerswitcher-item-active > a::before {
  content: "\f00c";
  font-family: FontAwesome;
}



/* ---------------------------- *
 * Resource preview modal       *
 * ---------------------------- */

.resource-preview-modal {
  position: absolute;
  width: 100%;
  height: 100%;
}

.resource-preview-modal .ui-resizable {
  width: 50%;
}

@media (max-width: 768px) {
.resource-preview-modal .ui-resizable {
  width: calc(100% - 1rem);
}
}

.resource-preview-modal .modal-dialog {
  height: 100%;
  margin: 0;
  padding: 7rem 0 1rem 1rem;
}

.resource-preview-modal .modal-dialog .modal-content {
  height: 100%;
  width: 100%;
  border-radius: 0;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}

.resource-preview-modal .modal-dialog .modal-body {
  position: absolute;
  top: 56px;
  bottom: 56px;
  width: 100%;
  max-height: none;
  height: auto;
}

.resource-preview-modal .modal-dialog .modal-header,
.resource-preview-modal .modal-dialog .modal-footer {
  height: 56px;
}

.resource-preview-modal .modal-dialog .modal-header {
  position: absolute;
  top: 0;
  width: 100%;
}

.resource-preview-modal .modal-dialog .modal-footer {
  position: absolute;
  margin-top: 0;
  bottom: 0;
  width: 100%;
  padding: 10px 20px;
}

.resource-preview-modal .modal-dialog .modal-body {
  overflow: auto;
}

.resource-preview-modal.modal .ui-resizable-se {
  right: 0;
}

/* ----------- *
 * Helper tool *
 * ----------- */

@media (min-width: 768px) {
.modal.mg-helperbutton-modal .modal-dialog {
  width: calc(100% - 100px);
}
}

@media (min-width: 1024px) {
.modal.mg-helperbutton-modal .modal-dialog {
  width: calc(900px);
}
}

.modal.mg-helperbutton-modal .modal-body {
  max-height: 700px;
}

.mg-helper-component-map-link {
  padding: 0px;
}

.mg-helper-component-table td > * {
  padding: 2px 0px;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

.mg-helper-component-table__uid {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media only screen and (max-width: 512px) {
.mg-helper-component-table td > * {
 max-width: 40px;
}
}

.mg-helper-component-table td > *:not(:first-child)::before {
  content: ", ";
}

/* ----------- *
 * LayerJungle *
 * ----------- */

.ol-viewport .mg-layer-tree {
  left: 1rem;
  overflow: hidden;
  position: absolute;
  top: 1rem;
}

.mg-layer-node {
  border-bottom: 4px solid transparent;
  border-top: 1px solid #999;
  padding: 2px 0 0 0;
}

.mg-layer-root,
.mg-layer-root > .mg-layer-node-inner > .mg-layer-node-content > .mg-layer-node {
  border-top: 0;
}

.mg-layer-root > .mg-layer-node-inner > .mg-layer-node-content > .mg-layer-node:first-child {
  border-top: 4px solid transparent;
}

.mg-layer-root > .mg-layer-node-inner > .mg-layer-node-content > .mg-layer-node:last-child {
  border-bottom: 0;
}

.mg-layer-node-inner {
  border: 0;
  border-radius: 0;
  margin: 0;
  box-shadow: none;
}

.ol-viewport .mg-layer-root > .mg-layer-node-inner {
  width: 284px;
}

.ol-viewport .mg-layer-root.mg-layer-node-collapsed > .mg-layer-node-inner {
  width: 112px;
}

.ol-viewport .mg-layer-root > .mg-layer-node-inner > .mg-layer-node-content > .mg-layer-node > .mg-layer-node-inner {
  width: 282px;
}

.mg-layer-root > .mg-layer-node-inner,
.mg-layer-root > .mg-layer-node-inner > .mg-layer-node-content > .mg-layer-node > .mg-layer-node-inner {
  border: 1px solid rgba(100, 100, 100, 0.75);
}

.mg-layer-root > .mg-layer-node-inner > .mg-layer-node-header,
.mg-layer-root > .mg-layer-node-inner > .mg-layer-node-content > .mg-layer-node > .mg-layer-node-inner {
  -webkit-box-shadow: 2px 2px 2px 0 rgba(100, 100, 100, 0.75);
  -moz-box-shadow: 2px 2px 2px 0 rgba(100, 100, 100, 0.75);
  box-shadow: 2px 2px 2px 0 rgba(100, 100, 100, 0.75);
}

.mg-layer-root > .mg-layer-node-inner > .mg-layer-node-content > .mg-layer-node .mg-layer-node-inner .mg-layer-node-inner {
  border-right: 0;
}

.mg-legend-container-collapsebtn .mg-legend-container-collapsebtn-text {
  display: none;
  text-align: center;
}

.mg-legend-wms-button-activate .mg-legend-container-collapsebtn .mg-legend-container-collapsebtn-text,
.mg-legend-container-button-activate .mg-legend-container-collapsebtn .mg-legend-container-collapsebtn-text {
  display: inline-block;
}

.mg-legend-container-collapsedicon-expanded,
.mg-legend-container-collapsedicon-collapsed {
  display: none;
  text-align: center;
  width: 8px;
}

.mg-legend-container-button-activate.mg-legend-container-expanded .mg-legend-container-collapsedicon-collapsed,
.mg-legend-container-button-activate.mg-legend-container-collapsed .mg-legend-container-collapsedicon-expanded {
  float: left;
  display: inline-block;
  margin: 3px;
}

.mg-legend-container-collapsed .mg-legend-container-body {
  display: none;
}

.mg-legend-override {
  padding-right: 5px;
}

.mg-legend-override-img {
  max-width: min(100%, 350px);
  height: auto;
}

.mg-legend-arcgis-collapsebtn {
  float: left;
  margin: 0 0.5rem 0 0;
}

.mg-legend-arcgis-collapsebtn:hover {
  cursor: pointer;
}

.mg-legend-arcgis-collapsedicon {
  display: inline-block;
  text-align: center;
  width: 8px;
}

.mg-legend-arcgis-collapsedicon.collapsed {
  display: none;
}

.mg-legend-arcgis-layer-title,
.mg-legend-arcgis-group-layer-title {
  text-decoration: underline;
}

.mg-legend-arcgis-layer-content,
.mg-legend-arcgis-layer-element div.mg-tree.rule-tree {
  padding-left: 1em;
}

.mg-legend-arcgis-layer-content.collapsed,
.mg-legend-arcgis-layer-container.inactive .mg-legend-arcgis-layer-content,
.mg-legend-arcgis-layer-container.inactive .mg-legend-arcgis-layer-header .mg-legend-arcgis-collapsebtn {
  display: none;
}

.mg-legend-arcgis-layer-container.inactive span.mg-legend-arcgis-layer-title {
  color: #767676;
}

.mg-legend-arcgis-layer-element,
.mg-legend-arcgis-item {
  display: table-row;
}

.mg-legend-arcgis-item img {
  border: none;
}

.mg-legend-wms-img-container img {
  display: block;
}

.mg-layer-node-collapsebtn {
  float: left;
  margin: 0 0.5rem 0 0;
}

.mg-layer-node-content {
  display: none;
}

.mg-layer-node-content .form-group {
  margin-bottom: 0;
}

.mg-layer-node-content .form-horizontal .checkbox {
  min-height: 0;
  padding-top: 0;
}

.mg-layer-node-expanded > .mg-layer-node-inner > .mg-layer-node-content {
  display: block;
}

.mg-layer-node-expanded.mg-layer-node-hidden > .mg-layer-node-inner > .mg-layer-node-content > .rule-tree .rule-tree-data-header *,
.mg-layer-node-expanded.mg-layer-node-hidden > .mg-layer-node-inner > .mg-layer-node-content > .mg-control-legend * {
  opacity: 0.5;
}

.mg-layer-node-collapsedicon-expanded,
.mg-layer-node-collapsedicon-collapsed {
  display: none;
  text-align: center;
  width: 8px;
}

.mg-layer-node-expanded > .mg-layer-node-inner > .mg-layer-node-header .mg-layer-node-collapsedicon-collapsed,
.mg-layer-node-collapsed > .mg-layer-node-inner > .mg-layer-node-header .mg-layer-node-collapsedicon-expanded {
  display: inline-block;
}

.mg-layer-node-visibleicon-hidden,
.mg-layer-node-visibleicon-visible,
.mg-layer-node-visibleicon-partial {
  display: none;
}

.mg-layer-node-hidden > .mg-layer-node-inner > .mg-layer-node-header .mg-layer-node-visibleicon-hidden,
.mg-layer-node-visible > .mg-layer-node-inner > .mg-layer-node-header .mg-layer-node-visibleicon-visible {
  display: inline-block;
}

.mg-layer-node-hidden.mg-layer-node-lyr > .mg-layer-node-inner > .mg-layer-node-content,
.mg-layer-node-hidden.mg-layer-node-lyr .mg-layer-node-actionbtns {
  opacity: 0.4;
}

.mg-layer-node-partial > .mg-layer-node-inner > .mg-layer-node-header .mg-layer-node-visibleicon-partial {
  color: #999;
  display: inline-block;
}

.mg-layer-node-content {
  padding: 0.5rem 0 0.5rem 1.5rem;
}

.mg-layer-node .mg-layer-node-header {
  background-color: #fff;
  border-bottom: 0;
  padding: 0.2rem 0.5rem 0.5rem 0.5rem;
}

.ol-viewport .mg-layer-node-title {
  color: #333;
  display: block;
  width: 270px;
}

.mg-layer-root .mg-layer-node-content .mg-layer-node-title-hidden {
  color: #767676;
}

/* Prevents the 'Base layers' node from being always grayed out */
.mg-layer-root .mg-grp-base-layers > .mg-layer-node-inner > .mg-layer-node-header > .mg-layer-node-title-hidden {
  color: #000;
}

.mg-map-panel-left .mg-layer-root .mg-grp-base-layers > .mg-layer-node-inner > .mg-layer-node-header > .mg-layer-node-title-hidden {
  color: var(--primary-color);
}

.mg-layer-node__sysperiod-icon,
.mg-layer-node__time-icon {
  color: #333;
  margin: 0 2px 0 0;
}

.main--with-south-timemachine .mg-layer-node__time-icon {
  color: #0088cc;
}

.mg-layer-node--not-in-time-range > .mg-layer-node-inner > .mg-layer-node-header > .mg-layer-node-title > .mg-layer-node__time-icon {
  color: #D35400;
}

.mg-layer-node > .mg-layer-node-inner > .mg-layer-node-header > .mg-layer-node-title-hidden > .mg-layer-node__time-icon {
  color: #aaa;
}

.mg-layer-root > .mg-layer-node-inner {
  background-color: transparent;
  border: none;
}

.mg-layer-node-title-not-in-zoom-range {
  font-style: italic;
}

.ol-viewport .mg-layer-root.mg-layer-node-collapsed > .mg-layer-node-inner > .mg-layer-node-header > .mg-layer-node-title {
  width: 100px;
}

@media only screen and (max-width: 512px) {
.ol-viewport .mg-layer-node-title {
  min-width: 23rem;
}
}

.ol-viewport .mg-layer-root.mg-layer-node-collapsed > .mg-layer-node-inner > .mg-layer-node-header .mg-layer-node-title {
  min-width: 10rem;
}

.mg-layer-node-compact > .mg-layer-node-inner > .mg-layer-node-content, .mg-layer-node-compact > .mg-layer-node-inner > .mg-layer-node-header > .mg-layer-node-collapsebtn {
  display: none;
}

.mg-layer-node-compact .mg-layer-node-compact--header-thumbnail {
  -moz-box-shadow: 1px 1px 1px 1px rgba(50, 50, 50, 0.75);
  -webkit-box-shadow: 1px 1px 1px 1px rgba(50, 50, 50, 0.75);
  box-shadow: 1px 1px 1px 1px rgba(50, 50, 50, 0.75);
  display: flex;
  float: left;
  height: 1.9rem;
  justify-content: center;
  margin-right: 1rem;
  margin-top: 1px;
  width: 2.7rem;
}

.mg-layer-node-actionbtns {
  float: right;
  margin: 0;
}

.mg-layer-node-actionbtns .btn {
  float: right;
  width: 2.4rem;
}

.mg-layer-node-actionbtns .mg-qwiz-component-clear-button {
  width: auto;
}

.mg-layer-node-content .mg-tree.rule-tree * {
  border: 0;
  margin: 0;
  padding: 0;
}

.mg-layer-node-content .mg-tree.rule-tree .rule-tree-thumbnail {
  float: left;
  height: 1.9rem;
  width: 2.7rem;
}

.mg-layer-node-content .mg-tree.rule-tree .rule-tree-label {
  display: block;
  padding: 0 0 0 1rem;
  width: auto;
}

.mg-layer-node-content > .mg-tree .mg-tree-item:not(:first-child) {
  margin: 0.5rem 0 0 0;
}

:root {
  --mg-layer-root-content--spacing: 10rem;
  --mg-layer-root-content--mobile-extra-spacing: 55px;
}

/* Remove the node from under the resize handle bar */
#left.mg-strategy-resizablepanel .mg-layer-root > .mg-layer-node-inner > .mg-layer-node-content {
  width: 100%;
  padding-right: 0;
}

.mg-layer-root > .mg-layer-node-inner > .mg-layer-node-content {
  max-height: calc(
    100vh
    - var(--mg-layer-root-content--spacing)
  );
  left: 0;
  overflow-x: hidden;
  overflow-y: scroll;
  padding: 0 3px 3px 0;
  scrollbar-width: none;  /* Hide scrollbar Firefox */
  width: calc(100% + 17px);
  background-color: transparent;
}

.mg-toolbar-horizontal-medium-active .ol-viewport .mg-layer-root > .mg-layer-node-inner > .mg-layer-node-content {
  max-height: calc(
    100vh
    - var(--mg-layer-root-content--spacing)
    - var(--map-bottom--height)
  );
}

.main--with-south-timemachine > .main-inner-top .ol-viewport .mg-layer-root > .mg-layer-node-inner > .mg-layer-node-content {
  max-height: calc(
    100vh
    - var(--mg-layer-root-content--spacing)
    - var(--south-timemachine--height)
  );
}

.main--with-south-timemachine.mg-timemachine--collapsed > .main-inner-top .ol-viewport .mg-layer-root > .mg-layer-node-inner > .mg-layer-node-content {
  max-height: calc(
    100vh
    - var(--mg-layer-root-content--spacing)
  );
}

.mg-toolbar-horizontal-medium-active .main--with-south-timemachine > .main-inner-top .ol-viewport .mg-layer-root > .mg-layer-node-inner > .mg-layer-node-content {
  max-height: calc(
    100vh
    - var(--mg-layer-root-content--spacing)
    - var(--south-timemachine--height)
    - var(--map-bottom--height)
  );
}

.mg-toolbar-horizontal-medium-active .main--with-south-timemachine.mg-timemachine--collapsed > .main-inner-top .ol-viewport .mg-layer-root > .mg-layer-node-inner > .mg-layer-node-content {
  max-height: calc(
    100vh
    - var(--mg-layer-root-content--spacing)
    - var(--map-bottom--height)
  );
}

@media only screen and (max-width: 768px) {
  .mg-layer-root > .mg-layer-node-inner > .mg-layer-node-content {
    max-height: calc(
      100vh
      - var(--mg-layer-root-content--spacing)
      - var(--mg-layer-root-content--mobile-extra-spacing)
    );
  }

  .mg-toolbar-horizontal-medium-active .ol-viewport .mg-layer-root > .mg-layer-node-inner > .mg-layer-node-content {
    max-height: calc(
      100vh
      - var(--mg-layer-root-content--spacing)
      - var(--map-bottom--height)
      - var(--mg-layer-root-content--mobile-extra-spacing)
    );
  }

  .main--with-south-timemachine > .main-inner-top .ol-viewport .mg-layer-root > .mg-layer-node-inner > .mg-layer-node-content {
    max-height: calc(
      100vh
      - var(--mg-layer-root-content--spacing)
      - var(--south-timemachine--height)
      - var(--mg-layer-root-content--mobile-extra-spacing)
    );
  }

  .main--with-south-timemachine.mg-timemachine--collapsed > .main-inner-top .ol-viewport .mg-layer-root > .mg-layer-node-inner > .mg-layer-node-content {
    max-height: calc(
      100vh
      - var(--mg-layer-root-content--spacing)
      - var(--mg-layer-root-content--mobile-extra-spacing)
    );
  }

  .mg-toolbar-horizontal-medium-active .main--with-south-timemachine > .main-inner-top .ol-viewport .mg-layer-root > .mg-layer-node-inner > .mg-layer-node-content {
    max-height: calc(
      100vh
      - var(--mg-layer-root-content--spacing)
      - var(--south-timemachine--height)
      - var(--map-bottom--height)
      - var(--mg-layer-root-content--mobile-extra-spacing)
    );
  }

  .mg-toolbar-horizontal-medium-active .main--with-south-timemachine.mg-timemachine--collapsed > .main-inner-top .ol-viewport .mg-layer-root > .mg-layer-node-inner > .mg-layer-node-content {
    max-height: calc(
      100vh
      - var(--mg-layer-root-content--spacing)
      - var(--map-bottom--height)
      - var(--mg-layer-root-content--mobile-extra-spacing)
    );
  }
}

.mg-layer-root > .mg-layer-node-inner > .mg-layer-node-content::-webkit-scrollbar {
  -webkit-appearance: none;
}

.mg-layer-root > .mg-layer-node-inner > .mg-layer-node-content::-webkit-scrollbar:vertical {
  width: 17px;
}

.mg-layer-root > .mg-layer-node-inner > .mg-layer-node-content::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 10px;
  border: 2px solid #fff;
}

.mg-layer-root > .mg-layer-node-inner > .mg-layer-node-content::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: #fff;
}

.mg-layer-root > .mg-layer-node-inner > .mg-layer-node-header .mg-layer-node-title {
  font-weight: bold;
}

.mg-layer-root > .mg-layer-node-inner > .mg-layer-node-header {
  background-color: #fff;
  border: 1px solid rgba(100, 100, 100, 0.75);
}

.mg-layer-node.mg-layer-node-drawing .mg-layer-node-inner,
.mg-layer-node.mg-layer-node-modifying .mg-layer-node-inner {
  border: 1px solid var(--primary-color);
}

.mg-layer-node-browsing .mg-layer-node-browsebtn.btn,
.mg-layer-node-drawing .mg-layer-node-drawbtn.btn,
.mg-layer-node-modifying .mg-layer-node-modifybtn.btn {
  background-color: #c7d2e7;
  border: 1px solid var(--primary-color);
}

.mg-layer-node-drawing .mg-layer-node-title,
.mg-layer-node-modifying .mg-layer-node-title {
  color: var(--primary-color);
  font-weight: bold;
}

.mg-layer-node-layer-label-container {
  display: table;
  width: 100%;
}

.mg-layer-node-layer-label-container > .col-md-12,
.mg-layer-node-layer-label-container > .col-md-12 > .form-group {
  padding: 0;
  margin: 0;
}

.mg-layer-node-layer-label-container > .col-md-12 > .form-group > .col-md-12 {
  padding: 0 7px 0 0;
  margin: 0;
}

.mg-layer-node-slider-container {
  display: table;
  width: 100%;
}

.mg-layer-node-slider-container > .col-md-12,
.mg-layer-node-slider-container > .col-md-12 > .form-group {
  padding: 0;
  margin: 0;
}

.mg-layer-node-slider-container > .col-md-12 > .form-group > .col-md-12 {
  padding: 0 7px 0 0;
  margin: 0;
}

.mg-layer-node .mg-qwiz-component-result-count {
  font-size: 12px;
  margin: -0.5rem 1rem 0.5rem 0;
}

.mg-layer-node .mg-qwiz-component-result-count .spinner {
  float: right;
}

.mg-layer-node .mg-qwiz-component-export .ol-control {
  position: relative;
}


/* ------------------------ *
 * LayerJungle in LeftPanel *
 * ------------------------ */

.mg-map-panel-left .mg-layer-tree .mg-layer-root {
  padding: 0;
}

.mg-map-panel-left .mg-layer-tree .mg-layer-root > .mg-layer-node-inner > .mg-layer-node-header {
  display: none;
}

.mg-map-panel-left .mg-layer-tree .mg-layer-root > .mg-layer-node-inner > .mg-layer-node-content {
  height: 100%;
}

/* ------------------------ *
 * iframe in the extra LeftPanel tabs *
 * ------------------------ */

 .mg-map-panel-left .tab-pane > iframe {
   width: 100%;
   height: 100%;
 }


/* --------- *
 * QuickZoom *
 * --------- */

.ol-overview .mg-control-quickzoom .dropdown-menu {
  left: auto;
  right: 1rem;
}

.mg-control-quickzoom .dropdown-menu {
  max-height: 640px;
  overflow-y: auto;
  top: auto;
}

.mg-control-bookmarks .mg-control-quickzoom .dropdown-menu {
  left: auto;
  right: 0;
  bottom:30px;
}

@media (max-height: 896px) {
.mg-control-quickzoom .dropdown-menu {
  max-height: 512px;
}
}

@media (max-height: 768px) {
.mg-control-quickzoom .dropdown-menu {
  max-height: 384px;
}
}

.mg-control-quickzoom .dropdown-menu li a {
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mg-control-quickzoom-list {
  list-style: none;
  padding: 0;
}

.mg-control-quickzoom-list a {
  display: block;
  margin: 0 0 1rem 0;
  padding: 1rem 0;
}


/* ---------------------------------------------------------- *
 * LayerJungle and LayerTree - hidden by ToolActivateStrategy *
 * ---------------------------------------------------------- */

@media only screen and (max-width: 1408px) {
#main-container.main-with-left .mg-hidelayertree #layer-tree,
#main-container.main-with-left .mg-hidelayertree .mg-layer-tree {
  display: none;
}
}

@media only screen and (max-width: 640px) {
#main-container.main .mg-hidelayertree #layer-tree,
#main-container.main .mg-hidelayertree .mg-layer-tree {
  display: none;
}
}

/* ----------------- *
 * TimeMachine (new) *
 * ----------------- */

.mg-timemachine-datasourceinfo {
  margin: 0 0 5px 0;
}

.mg-timemachine-datasourceinfo__content {
  display: none;
  font-size: 13px;
  margin: 0 0 10px 0;
}

.mg-timemachine-datasourceinfo__currenttime-label,
.mg-timemachine-datasourceinfo__refreshrate-label {
  font-weight: bold;
}

.mg-timemachine-datasourceinfo-table {
  margin: 2px 0;
  font-size: 12px;
  max-width: 245px;
}

.mg-timemachine-datasourceinfo__content > .btn {
  width: calc(100% - 16px);
}

.mg-timemachine-settings__menubtn,
.mg-timemachine-live-refresh .btn,
.mg-timemachine-history-timepicker .mg-field.row,
.mg-timemachine-history-timepicker .input-group > .btn,
.mg-timemachine-history-timeplayer .btn {
  width: 35px;
}

.mg-timemachine-history-rangepicker .mg-field.row,
.mg-timemachine-history-timepicker .mg-field.row {
  padding: 0;
  margin: 0;
}

.mg-timemachine-history-rangepicker .mg-field-ctn,
.mg-timemachine-history-timepicker .mg-field-ctn {
  float: none;
  padding: 0;
}

.mg-timemachine-history-rangepicker .form-control {
  height: 30px;
}

.mg-timemachine-history-timeplayer .btn-group {
  margin: 0 0 0 5px;
}

.mg-timemachine-currenttime {
  background-color: #0088cc;
  border: 1px solid #cccccc;
  color: white;
  font-size: 12pt;
  padding: 2px 10px;
}

.mg-timemachine-currenttime__date {
  display: inline-block;
  margin: 0 10px;
  text-align: center;
  width: 100px;
}

.mg-timemachine-currenttime__second {
  margin: 0 5px;
}

.mg-timemachine-currenttime__hour,
.mg-timemachine-currenttime__minute {
  margin: 0 0 0 5px;
}

.mg-timemachine-currenttime__hour:after,
.mg-timemachine-currenttime__minute:after {
  content: ':';
  margin: 0 0 0 5px;
}

.mg-timemachine-history-timepicker input.form-control {
  height: 0;
  margin: 0;
  opacity: 0;
  padding: 0;
  position: absolute;
  width: 0;
}

.mg-timemachine__mode--history .mg-qwiz-global-spatialfilter-advancedpanel__deletebtn,
.mg-timemachine__mode--history .mg-qwiz-global-spatialfilter-simplebutton button,
.mg-timemachine__mode--history .mg-timemachine-live-refresh__btn,
.mg-timemachine__loading--1 .mg-timemachine-live-refresh__btn,
.mg-timemachine__mode--live .mg-breadcrumbs__btn,
.mg-timemachine__mode--live .mg-timemachine-history-refreshspatialfilter .btn {
  cursor: not-allowed;
  pointer-events: none;
  opacity: 0.65;
  filter: alpha(opacity=65);
  -webkit-box-shadow: none;
  box-shadow: none;
}

.mg-timemachine__loading--1 .mg-timemachine-live-refresh .mg-btnicon {
  display: none;
}

.mg-timemachine__loading--1 .mg-timemachine-live-refresh .mg-btniconspin {
  display: inline-block;
}

.mg-timemachine-settings--menutitle {
  border-bottom: 1px solid #ccc;
  margin: 5px 10px 10px 10px;
  padding: 0 0 5px 0;
}

.mg-timemachine-settings .dropdown-menu {
  width: 300px;
}

.mg-timemachine-live-switch__btn {
  height: 30px;
  position: relative;
}

.mg-timemachine-live-switch .mg-ion {
  font-size: 19px;
  left: 8px;
  position: absolute;
  top: 3px;
}

.mg-timemachine-live-switch .mg-btnlabel {
  padding: 0 0 0 18px;
}

.mg-timemachine-settings__closebtn {
  float: right;
}

.mg-timemachine-settings__doc {
  margin: 0 14px 15px 14px;
}

.mg-timemachine-live-refresh,
.mg-timemachine-history-refreshspatialfilter {
  margin: 0 14px 15px 14px;
}

.mg-timemachine-live-refresh .btn,
.mg-timemachine-history-refreshspatialfilter .btn {
  width: 100%;
}

.mg-timemachine-delorean .mg-timemachine-slider {
  flex: auto;
  padding-top: 5px;
}

.mg-timemachine-slider {
  background-color: rgba(255, 255, 255, 0.9);
  margin: 0 10px;
}

.mg-timemachine__mode--history .mg-timemachine-slider .irs-handle {
  border: 4px solid #0088cc;
}

.mg-timemachine__mode--history .mg-timemachine-slider .irs-bar.irs-bar--single,
.mg-timemachine__mode--history .mg-timemachine-slider .irs--round .irs-single {
  background-color: #0088cc;
}

.mg-timemachine__mode--live .mg-timemachine-slider .irs-handle {
  border: 4px solid #1CA766;
}

.mg-timemachine__mode--live .mg-timemachine-live-switch__btn,
.mg-timemachine__mode--live .mg-timemachine-slider .irs-bar.irs-bar--single,
.mg-timemachine__mode--live .mg-timemachine-slider .irs--round .irs-single,
.mg-timemachine__mode--live .mg-timemachine-currenttime {
  background-color: #1CA766;
}

.mg-timemachine__mode--live .mg-timemachine-live-switch__btn {
  color: white;
}

.mg-timemachine-delorean {
  text-align: left;
  background-color: #ffffff;
}

.mg-timemachine-delorean--bottom,
.mg-timemachine-delorean--top {
  width: 100%;
}

.mg-timemachine-delorean--top {
  padding: 8px;
}

.mg-timemachine-delorean--top,
.mg-timemachine-delorean--topleft,
.mg-timemachine-delorean--topcenter,
.mg-timemachine-delorean--topright {
  display: flex;
}

.mg-timemachine-delorean--topcenter {
  flex: auto;
}

.mg-timemachine-delorean--topcenter .mg-timemachine-currenttime {
  margin: 0 0 1px auto;
}

.mg-timemachine-delorean--topcenter .mg-timemachine-history-timeplayer {
  margin: 0 auto 0 0;
}

.mg-timemachine-delorean--topright > * {
  margin: 0 0 0 5px;
}

.south-timemachine.mg-herald-resizable .ui-resizable-handle {
  border-bottom: 0;
  border-radius: 4px 4px 0 0;
  font-weight: bold;
  height: 23px;
  left: calc(50% - 44px);
  padding: 5px 0;
  width: 80px;
}

.south-timemachine.mg-herald-resizable .ui-resizable-n {
  top: -24px;
}

@media (max-width: 768px) {
  .mg-timemachine-currenttime {
    font-size: 10pt;
    padding: 2px;
  }

  .mg-timemachine-currenttime__date {
    margin: 0 2px;
    width: 85px;
  }

  .mg-timemachine-currenttime__second {
    margin: 0 2px;
  }

  .mg-timemachine-currenttime__hour,
  .mg-timemachine-currenttime__minute {
    margin: 0 0 0 2px;
  }

  .mg-timemachine-currenttime__hour:after,
  .mg-timemachine-currenttime__minute:after {
    margin: 0 0 0 2px;
  }

  .mg-timemachine-live-switch .btn {
    width: 35px;
  }

  .mg-timemachine-live-switch .mg-btnlabel,
  .mg-timemachine-history-rangepicker .mg-btnlabel {
    display: none;
  }

  .mg-timemachine-delorean--topright > * {
    margin: 0 0 0 1px;
  }
}

@media (max-width: 384px) {
  .mg-timemachine-currenttime__date {
    margin: 0 1px;
    width: 75px;
  }

  .mg-timemachine-history-rangepicker .mg-btnlabel {
    display: none;
  }
}

/* -------------------------------------------------------- *
 * Tools shown as panels on the top-right corner of the map *
 * -------------------------------------------------------- */

.mg-qwiz-global-spatialfilter-advancedpanel,
.mg-timemachine-asset-tracker-panel,
.mg-undock-panel,
.mg-osrm-editfeature-panel,
.mg-basemapswitcher-panel {
  background-color: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(100, 100, 100, 0.75);
  display: none;
  position: absolute;
  right: 6rem;
  top: 5rem;
  -webkit-box-shadow: 2px 2px 2px 0 rgba(100, 100, 100, 0.75);
  -moz-box-shadow: 2px 2px 2px 0 rgba(100, 100, 100, 0.75);
  box-shadow: 2px 2px 2px 0 rgba(100, 100, 100, 0.75);
}

.mg-qwiz-global-spatialfilter-advancedpanel,
.mg-timemachine-asset-tracker-panel--active,
.mg-undock-active .mg-undock-panel,
.mg-printPDF-active .mg-printPDF-control,
.mg-measure-panel-active .mg-measure-panel,
.mg-osrm-editfeature-panel,
.mg-basemapswitcher-panel {
  display: block;
}


/* ----------- *
 * PrintPdf    *
 * ----------- */

.mg-printPDF-control {
  background-color: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(100, 100, 100, 0.75);
  display: none;
  padding: 4px;
  position: absolute;
  right: 5rem;
  top: 5rem;
  width: 320px;
  -webkit-box-shadow: 2px 2px 2px 0 rgba(100, 100, 100, 0.75);
  -moz-box-shadow: 2px 2px 2px 0 rgba(100, 100, 100, 0.75);
  box-shadow: 2px 2px 2px 0 rgba(100, 100, 100, 0.75);
}

.mg-printPDF-control-panel legend {
  text-align: center;
}

/* ------------------------- *
 * measure control panel    *
 * ------------------------- */

 .mg-measure-panel {
  background-color: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(100, 100, 100, 0.75);
  display: none;
  padding: 4px;
  position: absolute;
  right: 7rem;
  top: 5rem;
  width: 400px;

  -webkit-box-shadow: 2px 2px 2px 0px rgba(100, 100, 100, 0.75);
  -moz-box-shadow:    2px 2px 2px 0px rgba(100, 100, 100, 0.75);
  box-shadow:         2px 2px 2px 0px rgba(100, 100, 100, 0.75);
}

.mg-measure-panel legend {
  text-align: center;
  line-height: 2em;
}

.mg-measure-panel button {
  margin-right: 5px;
  float: right;
}

.mg-measure-panel button[name="close_panel"] {
  position: absolute;
  top: 5px;
  right: 5px;
}

/* ------------- *
 * Undock Extent *
 * ------------- */

.mg-undock-extent {
  border: 100px solid rgba(0, 0, 0, 0.5);
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

/* ------------ *
 * Undock Panel *
 * ------------ */

.mg-undock-panel {
  padding: 5px;
}

.mg-undock-panel iframe {
  display: none;
}

.mg-undock-panel .mg-loading-spinner {
  color: rgba(0, 0, 0, 0.2);
  font-size: 30px;
  left: calc(50% - 15px);
  top: calc(50% - 15px);
}


/* ----------- *
 * Undock Dock *
 * ----------- */

.mg-undock-dock-iframe {
  height: 410px;
  padding: 10px;
  width: 100%;
}

/* ------------ *
 * Mask control *
 * ------------ */

.mg-control-mask {
  background-color: rgba(85, 85, 85, 0.4);
  display: none;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}

/* ------------ *
 *   WKT edit   *
 * ------------ */

.btn.mg-coordinates-editor-button,
.btn.wkt-edit {
  float: left;
}

.btn.btn-align-left {
  float: left;
}

.btn.btn-center {
  margin: auto auto;
}
/* --------------- *
 * Upload progress *
 * --------------- */

.mg-addfiles-control-progress {
  position: absolute;
  bottom: 0;
  left: 25%;
  right: 25%;
  max-height: 100%;
  transition: max-height 2.25s ease-out;
}

.mg-addfiles-control-progress:empty {
  max-height: 0;
}


/* ----------------- *
 * DragAndDrop modal *
 * ----------------- */

.modal.multiple.ui-draggable {
  background-color: transparent;
}

.mg-addfiles-modal__instructions {
  display: table-caption;
  font-weight: bold;
  padding-bottom: 10px;
}

.mg-addfiles-modal__ds-instructions {
  padding-left: 5px;
}

.mg-addfiles-modal__content {
  margin-top: 30px;
}

.mg-addfiles-modal__content-list {
  padding-left: 5px;
  margin-bottom: 20px;
  margin-top: 5px;
  padding-right: 5px;
}

.mg-addfiles-modal__content-list .row {
  border-bottom: 1px solid #ccc;
  padding: 5px 0px;
  margin-bottom: 5px;
  margin-left: 0px;
  margin-right: 0;
}

.mg-addfiles-modal__perfect-match {
  width: 25%;
  text-align: center;
  padding: 3px;
  color: #5CB85C;
  font-size: larger;
  font-weight: bold;
  margin: 10px auto;
}

.mg-accordion__item {
  position: relative;
}

/*override bootstrap*/
/* .mg-addfiles-modal__ds .panel-body {
  padding: 5px;
  padding-bottom: 45px;
} */

.mg-addfiles-modal__ds-header {
  margin-top: 10px;
  margin-bottom: 5px;
  margin-right: 20px;
  width: auto;
}

.mg-addfiles-modal__ds-btn-map {
  margin-right: 20px;
  padding-left: 5px;
  display: inline-block;
  width: auto;
  font-weight: 600;
}

.mg-addfiles-modal__btn-ds {
  margin-left: 5px;
}

.mg-addfiles-modal__ds-th {
  font-weight: 700;
}

.panel-heading .mg-accordion__icon.rotate {
  -moz-transition: all .3s linear;
  -webkit-transition: all .3s linear;
  transition: all .3s linear;
}

.panel-heading.collapsed .mg-accordion__icon.rotate {
  -moz-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

.mg-addfiles-modal .panel-heading {
  position: relative;
}

.mg-addfiles-modal .panel-heading .btn-info {
  position: absolute;
  right: 50px;
  top: 3px;
  z-index: 100;
}

/******************************
*  Responsive table component
******************************/
.mg-resp-table {
  display: table;
  width: 100%;
}

.mg-resp-table__row {
  display: table-row;
}

.mg-resp-table__heading {
  display: table-header-group;
  background-color: #cccccc;
  font-weight: bold;
}


.mg-resp-table__head {
  padding: 7px;
  font-weight: bold;
  background-color: #cccccc;
}

.mg-resp-table__cell,
.mg-resp-table__head {
  width: 50%;
  display: table-cell;
  padding: 3px 10px;
  /*border: 1px solid #999999;*/
}

.mg-resp-table__cell:last-child {
  border-left: 1px solid #999999;
}

.mg-resp-table__head:last-child {
  border-left: 1px solid #eaeaea;
}

.mg-resp-table__foot {
  display: table-footer-group;
  font-weight: bold;
  background-color: #eaeaea;
}

.mg-resp-table__body {
  display: table-row-group;
}

.mg-addfiles-modal__ds-map {
  margin-top: 40px;
}

.mg-addfiles-modal__ds-item .row {
  padding: 5px 0px;
  margin-bottom: 5px;
  margin-left: 0px;
  margin-right: 0;
}

.mg-resp-table__row:nth-child(even) {background: #eaeaea}
.mg-resp-table__row:nth-child(odd) {background: #ffffff}

.mg-mg-add-feature-perfect-match {
  color: green;
  font-size: larger;
  font-weight: bold;
  width: 100%;
}


/* ---------------- *
 * Resizable herald *
 * ---------------- */

.mg-herald-resizable.ui-resizable-disabled .ui-resizable-handle,
.mg-herald-resizable.ui-resizable-autohide .ui-resizable-handle {
  display: block;
}

.mg-herald-resizable .ui-resizable-handle {
  background-color: #fff;
  border: 1px solid #ccc;
  text-align: center;
}

.mg-herald-resizable .ui-resizable-n,
.mg-herald-resizable .ui-resizable-s {
  height: 14px;
  left: calc(50% - 30px);
  width: 60px;
}

.mg-herald-resizable .ui-resizable-e,
.mg-herald-resizable .ui-resizable-w {
  height: 60px;
  top: calc(50% - 30px);
  width: 14px;
}

.mg-herald-resizable .ui-resizable-n {
  top: -14px;
}

.mg-herald-resizable .ui-resizable-s {
  bottom: -14px;
}

.mg-herald-resizable .ui-resizable-e {
  right: -14px;
}

.mg-herald-resizable .ui-resizable-w {
  left: -14px;
}

.mg-herald-resizable--collapsed .ui-resizable-w {
  left: -13px;
}

.mg-herald-resizable.ui-resizable-disabled .ui-resizable-handle {
  cursor: pointer;
}

.mg-herald-resizable--collapsed.mg-herald-resizable--horizontally {
  height: 0;
}

.mg-herald-resizable--collapsed.mg-herald-resizable--vertically {
  width: 0;
}

.mg-herald-resizable--collapsed > * {
  display: none;
}

.mg-herald-resizable--collapsed > .ui-resizable-handle {
  display: block;
}


.mg-herald-resizable .ui-resizable-n > span,
.mg-herald-resizable .ui-resizable-s > span {
  font-size: 12px;
  line-height: 1;
  margin: 0 3px;
}


.mg-herald-resizable .ui-resizable-n > span.fa,
.mg-herald-resizable .ui-resizable-s > span.fa {
  font-size: 10px;
}



/* ----------------------- *
 * ResizablePanel strategy *
 * ------------------------ */

.mg-left .mg-strategy-resizablepanel.ui-resizable-disabled .ui-resizable-handle,
.mg-left .mg-strategy-resizablepanel.ui-resizable-autohide .ui-resizable-handle,
.mg-right .mg-strategy-resizablepanel.ui-resizable-disabled .ui-resizable-handle,
.mg-right .mg-strategy-resizablepanel.ui-resizable-autohide .ui-resizable-handle {
  display: block;
}

.mg-strategy-resizablepanel-helper-e {
  border-right: 1px dotted #333;
}

.mg-strategy-resizablepanel-helper-w {
  border-left: 1px dotted #333;
}

.mg-strategy-resizablepanel .ui-resizable-e,
.mg-strategy-resizablepanel .ui-resizable-w {
  background-color: #fff;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  text-align: center;
  writing-mode: vertical-lr;
  -ms-writing-mode: bt-lr;
}

.mg-strategy-resizablepanel .ui-resizable-handle .fa {
  margin: 5px 0;
}

/* Left panel */
.main-inner.mg-left-collapsed #left {
  display: none;
}

.mg-left-small #left.mg-strategy-resizablepanel .ui-resizable-handle .fa {
  font-size: 8px;
}

.mg-left-small #left.mg-strategy-resizablepanel .ui-resizable-e,
.mg-left-small #left.mg-strategy-resizablepanel .ui-resizable-w {
  font-size: 12px;
  line-height: 0.9;
  width: 12px;
}

.mg-left-small #left.mg-strategy-resizablepanel .ui-resizable-e {
  right: -12px;
}

.mg-left-small #left.mg-strategy-resizablepanel .ui-resizable-w {
  left: -12px;
}

.mg-left-small #center {
  padding-left: 12px;
}

.mg-left-small #layer-tree {
  padding-left: 12px;
}

.mg-left-medium #left.mg-strategy-resizablepanel .ui-resizable-handle .fa {
  font-size: 10px;
}

.mg-left-medium #left.mg-strategy-resizablepanel .ui-resizable-e,
.mg-left-medium #left.mg-strategy-resizablepanel .ui-resizable-w {
  font-size: 14px;
  line-height: 0.9;
  width: 14px;
}

.mg-left-medium #left.mg-strategy-resizablepanel .ui-resizable-e {
  right: -14px;
}

.mg-left-medium #left.mg-strategy-resizablepanel .ui-resizable-w {
  left: -14px;
}

.mg-left-medium #center {
  padding-left: 13px;
}

.mg-left-medium #layer-tree {
  padding-left: 14px;
}

.mg-left-large #left.mg-strategy-resizablepanel .ui-resizable-handle .fa {
  font-size: 12px;
}

.mg-left-large #left.mg-strategy-resizablepanel .ui-resizable-e,
.mg-left-large #left.mg-strategy-resizablepanel .ui-resizable-w {
  font-size: 15px;
  line-height: 1;
  width: 15px;
}

.mg-left-large #left.mg-strategy-resizablepanel .ui-resizable-e {
  right: -15px;
}

.mg-left-large #left.mg-strategy-resizablepanel .ui-resizable-w {
  left: -15px;
}

.mg-left-large #center {
  padding-left: 14px;
}

.mg-left-large #layer-tree{
  padding-left: 15px;
}

/* Right panel */
#right.ui-resizable {
  left: inherit !important;
  right: 0 !important;
}

.mg-right-small #right.mg-strategy-resizablepanel .ui-resizable-handle .fa {
  font-size: 8px;
}

.mg-right-small  #right.mg-strategy-resizablepanel .ui-resizable-e,
.mg-right-small  #right.mg-strategy-resizablepanel .ui-resizable-w {
  font-size: 12px;
  line-height: 0.9;
  width: 12px;
}

.mg-right-small  #right.mg-strategy-resizablepanel .ui-resizable-e {
  right: -12px;
}

.mg-right-small  #right.mg-strategy-resizablepanel .ui-resizable-w {
  left: -12px;
}

.mg-right-small #main-container:not(.mg-toolbar-vertical-small-active):not(.mg-toolbar-vertical-medium-active):not(.mg-toolbar-vertical-large-active) #center {
  padding-right: 11px;
}

.mg-right-small #vertical-toolbar {
  margin-right: 11px;
  border-right: 2px solid #fff;
}

.mg-right-medium  #right.mg-strategy-resizablepanel .ui-resizable-handle .fa {
  font-size: 10px;
}

.mg-right-medium  #right.mg-strategy-resizablepanel .ui-resizable-e,
.mg-right-medium  #right.mg-strategy-resizablepanel .ui-resizable-w {
  font-size: 14px;
  line-height: 0.9;
  width: 14px;
}

.mg-right-medium  #right.mg-strategy-resizablepanel .ui-resizable-e {
  right: -14px;
}

.mg-right-medium  #right.mg-strategy-resizablepanel .ui-resizable-w {
  left: -14px;
}

.mg-right-medium #main-container:not(.mg-toolbar-vertical-small-active):not(.mg-toolbar-vertical-medium-active):not(.mg-toolbar-vertical-large-active) #center {
  padding-right: 13px;
}

.mg-right-medium #vertical-toolbar {
  margin-right: 13px;
  border-right: 2px solid #fff;
}

.mg-right-large  #right.mg-strategy-resizablepanel .ui-resizable-handle .fa {
  font-size: 12px;
}

.mg-right-large  #right.mg-strategy-resizablepanel .ui-resizable-e,
.mg-right-large  #right.mg-strategy-resizablepanel .ui-resizable-w {
  font-size: 15px;
  line-height: 1;
  width: 15px;
}

.mg-right-large  #right.mg-strategy-resizablepanel .ui-resizable-e {
  right: -15px;
}

.mg-right-large  #right.mg-strategy-resizablepanel .ui-resizable-w {
  left: -15px;
}

.mg-right-large #main-container:not(.mg-toolbar-vertical-small-active):not(.mg-toolbar-vertical-medium-active):not(.mg-toolbar-vertical-large-active) #center {
  padding-right: 14px;
}

.mg-right-large #vertical-toolbar {
  margin-right: 14px;
  border-right: 2px solid #fff;
}

/* Both panels */
.mg-strategy-resizablepanel.ui-resizable-disabled .ui-resizable-handle {
  cursor: pointer;
}

.mg-strategy-resizablepanel-collapsed {
  width: 0 !important;
}

.main-with-left .mg-strategy-resizablepanel-collapsed .mg-map-panel-left,
.main-with-right .mg-strategy-resizablepanel-collapsed .mg-map-panel-right {
  display: none;
}


/* ----------------- *
 * Left panel control *
 * ------------------ */

.mg-map-panel-left {
  height: 100%;
  position: relative;
}

.mg-map-panel-left .tab-content {
  height: calc(100% - 44px);
  position: relative;
}

.mg-map-panel-left .tab-content .tab-pane {
  height: 100%;
  position: relative;
}

.mg-map-panel-left .nav-tabs {
  display: block;
  height: 44px;
  position: relative;
  background-color: #ffffff;
}


/* ------------------- *
 * Right panel control *
 * ------------------- */

.mg-map-panel-right {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.mg-map-panel-right > .tab-content {
  flex: 1;
  overflow: auto;
}

.mg-map-panel-right-tabs {
  display: flex;
  border: none;
}

.mg-map-panel-right-tabs > li {
  width: 100%;
  float: inherit;
  margin: 0;
  order: 0;
}

.mg-map-panel-right-tabs > li.mg-map-panel-right-tabs-in-app-documentation {
  order: 1;
}

.mg-map-panel-right-tabs > li > a {
  margin: 0;
  border-radius: 0;
  border-bottom: 1px solid #ddd;
  background-color: #f3f3f3;
  color: #555555;
}

.mg-map-panel-right-tabs > li.active > a,
.mg-map-panel-right-tabs > li.active > a:hover {
  border-radius: 0;
  background-color: #ffffff;
}

.mg-map-panel-right-tab-close-btn {
  float: right;
  padding: 3px;
}

.mg-map-panel-right-tab-close-btn:hover {
  cursor: pointer;
}

/* ----------------------------------- *
 * Right panel control (query results) *
 * ----------------------------------- */
.mg-map-panel-tool-query-result {
  padding: 8px;
}

.mg-result-longlist-resultctn table th  {
  padding: 4px;
}

/* -------------------------------------------------- *
 * Right panel control (edit feature and edit image)  *
 * -------------------------------------------------- */
.mg-map-panel-tool-edit-feature .modal,
.mg-map-panel-tool-edit-image .modal {
  position: relative !important;
  width: 100%;
  top: inherit;
  bottom: inherit;
  left: inherit;
  right: inherit;
  z-index: initial;
}

.mg-map-panel-tool-edit-feature .modal-dialog,
.mg-map-panel-tool-edit-image .modal-dialog {
  width: 100%;
}

.mg-map-panel-tool-edit-feature .modal-dialog .modal-content,
.mg-map-panel-tool-edit-image .modal-dialog .modal-content {
  border-radius: 0;
  border-top-width: 0;
  border-right-width: 0;
  border-left-width: 0;
  border-bottom-width: 1px;
}

.mg-map-panel-tool-edit-feature .modal-dialog .modal-content .modal-body,
.mg-map-panel-tool-edit-image .modal-dialog .modal-content .modal-body {
  max-height: initial;
}

/* ----------------------------------------------- *
 * Right panel control (in-app documentation tool) *
 * ----------------------------------------------- */

 .tab-content > .active.mg-map-panel-tool-in-app-documentation {
  display: flex;
  height: 100%;
 }

 .mg-map-panel-tool-in-app-documentation > iframe {
  flex: 1;
  border-width: 0px;
 }

 .mg-map-panel-right-tab-back-btn {
  float: right;
  padding: 3px;
}

.mg-map-panel-right-tab-back-btn.disabled {
  color: #999;
}

/* ======================== *
 *  Map toolbar - vertical  *
 * ======================== */

.ol-viewport .mg-toolbar-horizontal,
.ol-viewport .mg-toolbar-vertical {
  display: none;
}

#main-container.mg-toolbar-vertical-large-active #vertical-toolbar,
#main-container.mg-toolbar-vertical-medium-active #vertical-toolbar,
#main-container.mg-toolbar-vertical-small-active #vertical-toolbar {
  display: block;
  position: relative
}

.mg-toolbar-vertical {
  overflow-x: hidden;
  overflow-y: scroll;
  position: absolute;
  height: 100%;
}

.mg-toolbar-vertical .ol-control button,
.mg-toolbar-vertical .ol-control button.btn,
.mg-toolbar-vertical .ol-control .mg-addfiles-control-btn-label {
  border: 0;
  border-radius: 0;
  color: white;
  display: block;
  margin: 0;
  padding: 0;
  transition: all 0.3s ease;
}

.mg-toolbar-vertical .ol-control .mg-addfiles-control-btn-label {
  text-align: center;
}

.mg-toolbar-vertical,
.mg-toolbar-vertical .ol-control button,
.mg-toolbar-vertical .ol-control button:disabled,
.mg-toolbar-vertical .ol-control button:hover:disabled,
.mg-toolbar-vertical .ol-control .mg-addfiles-control-btn-label {
  background-color: rgb(60, 61, 62);
}

.mg-toolbar-vertical .ol-control button:focus,
.mg-toolbar-vertical .ol-control .mg-addfiles-control-btn-label:focus {
  outline: 0;
}

.mg-toolbar-vertical .ol-control button:disabled,
.mg-toolbar-vertical .ol-control button:hover:disabled {
  color: #999;
  cursor: not-allowed;
}

.mg-toolbar-vertical .ol-control .ol-zoom-in,
.mg-toolbar-vertical .ol-control .ol-zoom-out {
  font-weight: bold;
}

.mg-toolbar-vertical .ol-control button:hover,
.mg-toolbar-vertical .ol-control .mg-addfiles-control-btn-label:hover {
  background-color: #4aaf5d;
}

.mg-toolbar-vertical .ol-control .mg-addfiles-control-btn-label:hover {
  cursor: pointer;
}

.mg-toolbar-vertical .mg-control-geolocate.pending button,
.mg-toolbar-vertical .mg-control-geolocate.following button {
  background-color: #fac802;
}

.mg-toolbar-vertical .mg-control-geolocate.active button,
.mg-toolbar-vertical .mg-deadreckoning-button.active button,
.mg-toolbar-vertical .mg-editfeature-singlecontrol.activedraw button.mg-editfeature-singlecontrol-draw,
.mg-toolbar-vertical .mg-editfeature-singlecontrol.activemodify button.mg-editfeature-singlecontrol-modify,
.mg-toolbar-vertical .mg-qwiz-global-spatialfilter-advancedbutton.active button,
.mg-toolbar-vertical .mg-qwiz-global-spatialfilter-simplebutton.active button,
.mg-toolbar-vertical .mg-sketch-button.active button,
.mg-toolbar-vertical .mg-timemachine-collapsebutton button,
.mg-toolbar-vertical .mg-undock-button.active button,
.mg-toolbar-vertical .mg-addfiles-control.notempty button,
.mg-toolbar-vertical .mg-control-measure.finished .mg-control-measure-button,
.mg-toolbar-vertical .mg-control-measure.drawing .mg-control-measure-button,
.mg-toolbar-vertical .mg-featurebuffer-button.active button {
  background-color: #00c4ff;
}

.mg-qwiz-global-spatialfilter--hasfilter .mg-toolbar-vertical .mg-qwiz-global-spatialfilter-advancedbutton button {
  background-color: #8339fa;
}

.main--with-south-timemachine.mg-timemachine--collapsed .mg-toolbar-vertical .mg-timemachine-collapsebutton button {
  background-color: rgb(60, 61, 62);
}

.mg-toolbar-vertical .btn.dropdown-toggle {
  height: 22px;
}

.mg-toolbar-vertical .ol-control button:hover + .dropdown-toggle {
  background-color: #3c763d;
}

#main-container.mg-toolbar-vertical-small-active #geocoder,
#main-container.mg-toolbar-vertical-medium-active #geocoder,
#main-container.mg-toolbar-vertical-large-active #geocoder {
  right: 6px;
}


/* vertical-large */

#main-container.mg-toolbar-vertical-large-active #vertical-toolbar,
.mg-toolbar-vertical-large .ol-control button,
.mg-toolbar-vertical-large .ol-control .mg-addfiles-control-btn-label {
  width: 52px;
}

.mg-toolbar-vertical-large .ol-control button,
.mg-toolbar-vertical-large .ol-control .mg-addfiles-control-btn-label {
  font-size: 24px;
  height: 52px;
}

.mg-toolbar-vertical-large .ol-control .mg-addfiles-control-btn-label {
  line-height: 52px;
}

.mg-toolbar-vertical-large .ol-control .ol-zoom-in,
.mg-toolbar-vertical-large .ol-control .ol-zoom-out {
  font-size: 36px;
}

.mg-toolbar-vertical-large .mg-control-measure .dropdown-menu {
  min-width: 52px;
}

.mg-toolbar-vertical-large .mg-control-measure .dropdown-menu a {
  width: 52px;
  height: 52px;
  padding: 15px 15px 15px 20px;
}


/* vertical-medium */

#main-container.mg-toolbar-vertical-medium-active #vertical-toolbar,
.mg-toolbar-vertical-medium .ol-control button,
.mg-toolbar-vertical-medium .ol-control .mg-addfiles-control-btn-label {
  width: 42px;
}

.mg-toolbar-vertical-medium .ol-control button,
.mg-toolbar-vertical-medium .ol-control .mg-addfiles-control-btn-label {
  font-size: 16px;
  height: 42px;
}

.mg-toolbar-vertical-medium .ol-control .mg-addfiles-control-btn-label {
  line-height: 42px;
}

.mg-toolbar-vertical-medium .ol-control .ol-zoom-in,
.mg-toolbar-vertical-medium .ol-control .ol-zoom-out {
  font-size: 24px;
}

.mg-toolbar-vertical-medium .mg-control-measure .dropdown-menu {
  min-width: 42px;
}

.mg-toolbar-vertical-medium .mg-control-measure .dropdown-menu a {
  width: 42px;
  height: 42px;
  padding: 10px 10px 10px 14px;
}


/* vertical-small */

#main-container.mg-toolbar-vertical-small-active #vertical-toolbar,
.mg-toolbar-vertical-small .ol-control button,
.mg-toolbar-vertical-small .ol-control .mg-addfiles-control-btn-label {
  width: 32px;
}

.mg-toolbar-vertical-small .ol-control button,
.mg-toolbar-vertical-small .ol-control .mg-addfiles-control-btn-label {
  font-size: 12px;
  height: 32px;
}

.mg-toolbar-vertical-small .ol-control .mg-addfiles-control-btn-label {
  line-height: 32px;
}

.mg-toolbar-vertical-small .ol-control .ol-zoom-in,
.mg-toolbar-vertical-small .ol-control .ol-zoom-out {
  font-size: 18px;
}

.mg-toolbar-vertical-small .mg-control-measure .dropdown-menu {
  min-width: 32px;
}

.mg-toolbar-vertical-small .mg-control-measure .dropdown-menu a {
  width: 32px;
  height: 32px;
  padding: 8px;
}


/* measure */

.mg-toolbar-vertical .mg-control-measure .dropdown-menu {
  border-radius: 0;
  box-shadow: none;
  border: 0;
  left: 0;
  margin: 0;
  padding: 0;
  right: auto;
}

.mg-toolbar-vertical .mg-control-measure .dropdown-menu a {
  display: block;
}

.mg-toolbar-vertical .mg-control-measure .mg-component-dropdown-text {
  display: none;
}


/* timemachine, undock */

#main-container.mg-toolbar-vertical-large-active .mg-qwiz-global-spatialfilter-advancedpanel,
#main-container.mg-toolbar-vertical-large-active .mg-timemachine-asset-tracker-panel,
#main-container.mg-toolbar-vertical-large-active .mg-printPDF-control,
#main-container.mg-toolbar-vertical-large-active .mg-measure-panel,
#main-container.mg-toolbar-vertical-large-active .mg-undock-panel,
#main-container.mg-toolbar-vertical-large-active .mg-osrm-editfeature-panel,
#main-container.mg-toolbar-vertical-large-active .mg-basemapswitcher-panel,
#main-container.mg-toolbar-vertical-medium-active .mg-qwiz-global-spatialfilter-advancedpanel,
#main-container.mg-toolbar-vertical-medium-active .mg-timemachine-asset-tracker-panel,
#main-container.mg-toolbar-vertical-medium-active .mg-printPDF-control,
#main-container.mg-toolbar-vertical-medium-active .mg-measure-panel,
#main-container.mg-toolbar-vertical-medium-active .mg-undock-panel,
#main-container.mg-toolbar-vertical-medium-active .mg-osrm-editfeature-panel,
#main-container.mg-toolbar-vertical-medium-active .mg-basemapswitcher-panel,
#main-container.mg-toolbar-vertical-small-active .mg-qwiz-global-spatialfilter-advancedpanel,
#main-container.mg-toolbar-vertical-small-active .mg-timemachine-asset-tracker-panel,
#main-container.mg-toolbar-vertical-small-active .mg-printPDF-control,
#main-container.mg-toolbar-vertical-small-active .mg-measure-panel,
#main-container.mg-toolbar-vertical-small-active .mg-undock-panel,
#main-container.mg-toolbar-vertical-small-active .mg-osrm-editfeature-panel,
#main-container.mg-toolbar-vertical-small-active .mg-basemapswitcher-panel {
  right: 7px;
  top: 45px;
}

@media only screen and (max-width : 360px) {
  #main-container.mg-toolbar-vertical-large-active .mg-qwiz-global-spatialfilter-advancedpanel,
  #main-container.mg-toolbar-vertical-large-active .mg-timemachine-asset-tracker-panel,
  #main-container.mg-toolbar-vertical-large-active .mg-printPDF-control,
  #main-container.mg-toolbar-vertical-large-active .mg-measure-panel,
  #main-container.mg-toolbar-vertical-large-active .mg-undock-panel,
  #main-container.mg-toolbar-vertical-large-active .mg-osrm-editfeature-panel,
  #main-container.mg-toolbar-vertical-medium-active .mg-qwiz-global-spatialfilter-advancedpanel,
  #main-container.mg-toolbar-vertical-medium-active .mg-timemachine-asset-tracker-panel,
  #main-container.mg-toolbar-vertical-medium-active .mg-printPDF-control,
  #main-container.mg-toolbar-vertical-medium-active .mg-measure-panel,
  #main-container.mg-toolbar-vertical-medium-active .mg-undock-panel,
  #main-container.mg-toolbar-vertical-medium-active .mg-osrm-editfeature-panel,
  #main-container.mg-toolbar-vertical-small-active .mg-qwiz-global-spatialfilter-advancedpanel,
  #main-container.mg-toolbar-vertical-small-active .mg-timemachine-asset-tracker-panel,
  #main-container.mg-toolbar-vertical-small-active .mg-printPDF-control,
  #main-container.mg-toolbar-vertical-small-active .mg-measure-panel,
  #main-container.mg-toolbar-vertical-small-active .mg-undock-panel,
  #main-container.mg-toolbar-vertical-small-active .mg-osrm-editfeature-panel {
    right: 7px;
    top: 4px;
    z-index: 1060;
  }
}


/* ========================== *
 *  Map toolbar - horizontal  *
 * ========================== */

.mg-toolbar-horizontal {
  border-top: 1px solid rgb(60, 61, 62);
  background-color: #e2e2e2;
  padding: 0 4px;
  height: 100%;
}

.mg-toolbar-horizontal .mg-toolbar-horizontal-left,
.mg-toolbar-horizontal .mg-toolbar-horizontal-right,
.mg-toolbar-horizontal .mg-toolbar-horizontal-ctn {
  display: inline-block;
}

.mg-toolbar-horizontal .mg-toolbar-horizontal-ctn {
  display: table-cell;
  padding: 3px 1px;
  vertical-align: middle;
}

.mg-toolbar-horizontal .mg-toolbar-horizontal-ctn > * {
  margin: 3px;
}

.mg-toolbar-horizontal-medium-active .mg-areasofinterest-editor {
  bottom: 5px;
}

.mg-toolbar-horizontal-medium-active #left .mg-strategy-resizablepanel-toggle-btn {
  top: calc(100% - 10rem);
}

.mg-toolbar-horizontal .mg-areasofinterest-dropdown,
.mg-toolbar-horizontal .mg-areasofinterest-tool-editbtn,
.mg-toolbar-horizontal .mg-control-currentzoom,
.mg-toolbar-horizontal .mg-control-mouseposition,
.mg-toolbar-horizontal .mg-control-scale select,
.mg-toolbar-horizontal .mg-control-scale-text {
  background-color: #fff;
  padding: 3px 6px;
}

.mg-toolbar-horizontal .mg-areasofinterest-tool-editbtn {
  margin: -3px 0 0 0;
}

.mg-toolbar-horizontal .ol-scale-line-inner {
  border: 1px solid #fff;
  color: #fff;
  font-size: 14px;
}

/* ---------------------------- *
 * Popup message modal          *
 * ---------------------------- */
.popup-modal .modal-dialog .modal-footer {
  text-align: center;
}


/* =========== *
 *  Map Toasts *
 * =========== */

.mg-maptoasts-ctn {
  bottom: 0;
  position: absolute;
  right: 0;
  user-select: text;
  z-index: 10000;
}

/* ============== *
 *  Asset Finder  *
 * ============== */

.mg-qwiz-asset-finder-modal--loading .mg-btnicon {
  display: none;
}

.mg-qwiz-asset-finder-modal--loading .mg-btniconspin {
  display: inline-block;
}

.mg-qwiz-asset-finder-modal .mg-field-datetimerange {
  display: inline-block;
  float: none;
  margin-right: 6px;
}

.mg-qwiz-asset-finder-modal .mg-field-datetimerange,
.mg-qwiz-asset-finder-modal .mg-field-datetimerange .mg-field-ctn {
  padding: 0px;
  width: auto;
  height: 0px;
}

.mg-timemachine-asset-finder-modal__date-time-range {
  height: 33.6px;
}

.mg-qwiz-asset-finder-modal .mg-field-datetimerange .mg-field-ctn,
.mg-qwiz-asset-finder-modal .mg-field-datetimerange .mg-field-inline-error-ctn {
  float: none;
}

.mg-qwiz-asset-finder-modal .modal-footer p {
  text-align: left;
}

.mg-qwiz-asset-finder-modal .handsontable tr {
  cursor: pointer;
}

/* ====================================== *
 *  Asset Tracker / Global spatial filter *
 * ====================================== */

.mg-qwiz-global-spatialfilter-advancedpanel,
.mg-timemachine-asset-tracker-panel,
.mg-basemapswitcher-panel {
  left: auto;
}

/* ============== *
 *  Asset Tracker *
 * ============== */

.mg-timemachine-asset-tracker-panel {
  padding: 3px;
  width: 160px;
}

.mg-timemachine-asset-tracker-panel__stopbtn {
  width: 100%;
}

.mg-timemachine-asset-tracker-panel__stopicon--found,
.mg-timemachine-asset-tracker-panel__stopicon--lost {
  display: none;
  width: 15px;
}

.mg-timemachine-asset-tracker-panel--found .mg-timemachine-asset-tracker-panel__stopicon--found,
.mg-timemachine-asset-tracker-panel--lost .mg-timemachine-asset-tracker-panel__stopicon--lost {
  display: inline-block;
}


/* ====================== *
 *  Global spatial filter *
 * ====================== */

.mg-qwiz-global-spatialfilter-herald--dragbox {
  border: 2px solid rgba(0, 153, 255, 0.8);
  border-radius: 2px;
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.8),
    0 0 0 2px inset rgba(255, 255, 255, 0.8);
}

.mg-qwiz-global-spatialfilter-advancedpanel {
  padding: 10px;
  width: 200px;
}

.mg-qwiz-global-spatialfilter-advancedpanel__closebtn,
.mg-basemapswitcher-panel__closebtn
 {
  float: right;
  margin: -5px -10px 0 0;
}

.mg-qwiz-global-spatialfilter-advancedpanel__header,
.mg-basemapswitcher-panel__header {
  border-bottom: 1px solid #ccc;
  margin: 0 0 7px 0;
  padding: 0 0 5px 0;
}

.mg-qwiz-global-spatialfilter-advancedpanel__btn,
.mg-basemapswitcher-panel__btn {
  margin: 0 0 5px 0;
  position: relative;
  text-align: left;
  width: 100%;
}

.mg-qwiz-global-spatialfilter-advancedpanel__btn .mg-btnicon,
.mg-basemapswitcher-panel__btn .mg-btnicon {
  width: 18px;
}

.mg-qwiz-global-spatialfilter-advancedpanel__btn .mg-btnlabel,
.mg-basemapswitcher-panel__btn .mg-btnlabel {
  display: inline-block;
  left: 32px;
  position: absolute;
  top: 6px;
  width: calc(100% - 32px);
}

.mg-qwiz-global-spatialfilter-advancedpanel__drawextbtn .mg-btnlabel {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mg-qwiz-global-spatialfilter-advancedpanel__state--drawingrectangle .mg-qwiz-global-spatialfilter-advancedpanel__drawrectanglebtn,
.mg-qwiz-global-spatialfilter-advancedpanel__state--drawingcircle .mg-qwiz-global-spatialfilter-advancedpanel__drawcirclebtn,
.mg-qwiz-global-spatialfilter-advancedpanel__state--drawingpolygon .mg-qwiz-global-spatialfilter-advancedpanel__drawpolygonbtn,
.mg-qwiz-global-spatialfilter-advancedpanel__state--followingmapextent .mg-qwiz-global-spatialfilter-advancedpanel__followbtn {
  background-color: #39b9eb;
  color: white;
}

.mg-qwiz-global-spatialfilter-advancedpanel__state--followingmapextent .mg-qwiz-global-spatialfilter-advancedpanel__refreshbtn,
.mg-qwiz-global-spatialfilter-advancedpanel--none .mg-qwiz-global-spatialfilter-advancedpanel__deletebtn {
  box-shadow: none;
  -webkit-box-shadow: none;
  cursor: not-allowed;
  filter: alpha(opacity=65);
  opacity: 0.65;
  pointer-events: none;
}


/* ======================================================= *
 *  Simplified Feature Editing (EFS) (edit_feature_simple) *
 * ======================================================= */

.mg-efs-panel-container {
  position: absolute;
  right: 45px;
  top: 50px;
}

.mg-efs-panel {
  display: flex;
  width: 200px;
}

.mg-efs-panel--with-settings {
  width: 237px;
}

.mg-efs-list__datasource {
  color: #333333;
}

.mg-efs-list__dropdown-btn {
  display: flex;
  text-align: left;
}

.mg-efs-list__btn-label {
  flex: 1;
}

.mg-efs-list__rule {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mg-efs-panel--with-settings .mg-efs-list__rule {
  max-width: 237px;
}

.mg-efs-list__rule-img {
  height: 20px;
  width: 30px;
}

.btn .mg-efs-list__btn-caret {
  margin: 8px 0 0 3px;
}

.mg-efs-drawlist {
  display: flex;
}

.mg-efs-drawlist .mg-efs-list__dropdown-btn {
  width: calc(200px - 36px); /* 200px == panel size */
}

.mg-efs-drawlist .mg-efs-list__btn-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mg-efs-padlock__btn,
.mg-efs-snapswitch__btn {
  width: 100%;
}

.mg-efs-padlock__icon {
  display: none;
  width: 12px;
}

.mg-efs-padlock--locked .mg-efs-padlock__icon--lock,
.mg-efs-padlock--unlocked .mg-efs-padlock__icon--unlock {
  display: inline-block;
}

.mg-efs-drawbutton--drawing-on .btn,
.mg-efs-padlock--locked .btn,
.mg-efs-snapswitch--snapping-on .btn {
  background-color: #31b0d5;
  border-color: #269abc;
  color: white;
}

.mg-efs-selection {
  background-color: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(100, 100, 100, 0.75);
  -webkit-box-shadow: 2px 2px 2px 0 rgba(100, 100, 100, 0.75);
  -moz-box-shadow: 2px 2px 2px 0 rgba(100, 100, 100, 0.75);
  box-shadow: 2px 2px 2px 0 rgba(100, 100, 100, 0.75);
  display: flex;
  left: 10px;
  position: absolute;
  top: 12px;
}

.ol-viewport .mg-efs-selection-formlist {
  width: 270px;
}

@media (min-width: 992px) {
  .ol-viewport .mg-efs-selection-formlist {
    width: 400px;
  }
}

.mg-efs-selection .mg-efs-form {
  margin: 3px;
}

.mg-efs-form .panel-heading {
  display: flex;
}

.mg-efs-form .panel-body {
  max-height: calc(100vh - 20rem);
  overflow-y: scroll;
}

.mg-efs-form .mg-efs-list {
  display: inline-block;
  flex: 1;
}

.mg-efs-form .mg-efs-list__dropdown,
.mg-efs-form .mg-efs-list__dropdown-btn {
  width: 100%;
}

.mg-efs-form .mg-efs-list__dropdown .dropdown-toggle {
  white-space: normal;
}

.mg-efs-form-labelnumber {
  border-radius: 50%;
  display: inline-block;
  font-size: 10pt;
  height: 24px;
  margin: 5px 10px 0 0;
  width: 24px;
}

.mg-efs-form .panel-footer {
  text-align: right;
}

.mg-efs-label {
  background-color: rgb(51, 51, 51, 0.8);
  border-radius: 50% 50% 0% 50%;
  font-size: 7pt;
  height: 18px;
  width: 18px;
}

.mg-efs-form-labelnumber,
.mg-efs-label {
  border: 2px solid #fff;
  color: white;
  font-weight: bold;
  font-family: "Arial";
  text-align: center;
}

.mg-efs-form-labelnumber,
.mg-efs-label--selected {
  background-color: rgb(66, 101, 175, 0.9);
}

.mg-efs-form--clean .mg-efs-form__btn-save {
  cursor: not-allowed;
  pointer-events: none;
  opacity: 0.65;
  filter: alpha(opacity=65);
  -webkit-box-shadow: none;
  box-shadow: none;
}

.mg-efs-label--highlighted {
  background-color: rgb(219, 68, 54, 0.9);
}

.mg-efs-selection-numberlist {
  margin: 0;
  padding: 3px 1px 3px 3px;
}

.mg-efs-selection-numberlist .list-group-item,
.mg-efs-selection-numberlist .mg-efs-selection-actionsonall-btn {
  padding: 8px;
  text-align: center;
  width: 38px;
}

.mg-efs-selection-numberlist .mg-efs-selection-actionsonall-btn {
  display: inline-block;
  height: 100%;
  width: 100%;
}

.mg-efs-selection-numberlist .mg-efs-selection-actionsonall-ctn {
  padding: 0;
}

.mg-efs-selection--visible .ol-viewport .mg-layer-tree {
  display: none;
}

.mg-efs-selection-actionsonall-ctn .dropdown-menu,
.mg-efs-settings .dropdown-menu {
  padding: 5px;
}

.mg-efs-selection-actionsonall-ctn .dropdown-menu button,
.mg-efs-settings .dropdown-menu button {
  margin: 2px 0;
  width: 100%;
}


/* --------------------- *
 * Find Coordinates tool *
 * --------------------- */

.mg-findcoordinates-editpanel-content {
  height: 150px;
}

.mg-findcoordinates-editpanel-actionbuttons {
  width: 100%;
  padding: 4px;
  margin-top: 10px;
}

.mg-findcoordinates-editpanel > .mg-findcoordinates-editpanel-actionbuttons >
  .btn + .btn {
    margin-left: 4px;
  }

.mg-findcoordinates-coord-panel {
  vertical-align: middle;
  padding: 0 3px 0 3px;
  border-radius: 3px;
}

.mg-findcoordinates-coord-panel::before {
  content: attr('data-format');
}

.mg-findcoordinates-coord-panel + .mg-findcoordinates-coord-panel {
  padding-top: 0;
  padding-left: 5px;
}

.mg-findcoordinates-coord-panel div {
  display: inline-block;
}

.mg-findcoordinates-coord-panel .mg-findcoordinates-coord-panel-cmpnt-symbol +
  .mg-findcoordinates-coord-panel-cmpnt-ctrl {
  margin-left: 3px;
}

.mg-findcoordinates-coord-panel > .mg-findcoordinates-coord-panel-format {
  font-size: 12px;
  width: 4%;
  color: steelblue;
  margin-right: 5px;
  transform: translateY(-60%);
}

.mg-findcoordinates-coord-panel > .mg-findcoordinates-coord-panel-body {
  width: 95%;
}

.mg-findcoordinates-coord-panel
  .mg-findcoordinates-coord-panel-component-container > *
{
  display: inline-block;
}

.mg-findcoordinates-coord-panel-component-container +
  .mg-findcoordinates-coord-panel-component-container {
  margin-left: 5px;
}

.mg-findcoordinates-coord-panel
  input.mg-findcoordinates-coord-panel-component-control {
  width: 50px;
}

.mg-findcoordinates-coord-panel
  input.mg-findcoordinates-coord-panel-component-control-decimal-val {
  width: 85px;
}

.mg-findcoordinates-coord-panel
  select.mg-findcoordinates-coord-panel-component-control {
  height: 24px;
  width: 42px;
  text-align: left;
}

.mg-findcoordinates-coord-panel
  .mg-findcoordinates-coord-panel-component-control {
  text-align: right;
  border: 1px solid #ccc;
  box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
  border-radius: 4px;
}

.mg-findcoordinates-coord-panel .mg-findcoordinates-coord-panel-component-control
  + .mg-findcoordinates-coord-panel-component-symbol
{
  height: 20px;
  width: 5px;
  margin-left: 1px;
  margin-right: 2px;
}

.mg-findcoordinates-coord-panel-component-symbol > sup {
  font-size: 13px;
}

.mg-findcoordinates-coord-panel-component-symbol > span {
  font-size: 12px;
}

.mg-findcoordinates-editpanel-coord-panel-container {
  display: inline-block;
}

.mg-findcoordinates-editpanel-coord-panel-container {
  width: 87%;
  float: left;
  border-right: 1px #e5e5e5 solid;
}

.mg-findcoordinates-editpanel-coord-panel-container
  .mg-findcoordinates-coord-panel
    fieldset.mg-findcoordinates-coord-panel-component-container
{
  border-top: 1px dashed indigo;
  border-radius: 10px;
  padding-top: 5px;
}

.mg-findcoordinates-coord-panel
  fieldset.mg-findcoordinates-coord-panel-component-container
{
  position: relative;
  display: inline-block;
  padding: 2px;
}


.mg-findcoordinates-coord-panel-component-container--latitude,
.mg-findcoordinates-coord-panel-component-container--longitude
{
  width: 49.5%;
}

fieldset.mg-findcoordinates-coord-panel-component-container--easting,
fieldset.mg-findcoordinates-coord-panel-component-container--northing
{
  width: 39%;
}

fieldset.mg-findcoordinates-coord-panel-component-container--zone
{
  width: 20%;
}

.mg-findcoordinates-coord-panel
  fieldset.mg-findcoordinates-coord-panel-component-container > legend
{
  padding: 0 3px 0 3px;
  font-size: 12px;
  font-style: italic;
  margin-left: 5px;
  width: auto;
  border: none;
  margin-bottom: 0;
}

.mg-findcoordinates-coord-panel-component-clear-flds-btn {
  float: left;
  color: grey;
  cursor: pointer;
  margin-left: 5px;
}

.mg-findcoordinates-coord-panel-component-invalid-icon {
  float: right;
  color: orangered;
  margin-right: -4px;
}

div.modal.allow-interaction.mg-findcoordinates-modal .modal-content {
  min-height: auto;
}

.mg-findcoordinates-modal .modal-header,
.mg-findcoordinates-modal .modal-body {
  padding: 8px;
}

div.modal.allow-interaction.mg-findcoordinates-modal .modal-title {
  line-height: 2;
}

#map .mg-findcoordinates-modal.allow-interaction.ui-draggable {
  top: 60px;
}

.mg-findcoordinates-modal .ui-draggable-handle {
  cursor: move;
}

div.mg-findcoordinates-control.active > .mg-findcoordinates-button {
  background-color: #39b9eb;
  color: white;
}

div.mg-findcoordinates-coord-panel-component-icons {
  width: 28px;
  height: 10px;
}

div.mg-findcoordinates-coord-panel-component-icons > span.fa {
  margin-top: -2px;
}

@media (min-width: 768px) {
  div.mg-findcoordinates-modal > .modal-dialog {
    width: 800px;
  }
}

.mg-findcoordinates-coord-panel-component-utm >
  input.mg-findcoordinates-coord-panel-component-control-decimal-val {
    width: 100px;
  }

.mg-findcoordinates-editpanel-foundlist-container {
  height: 100%;
  width: 12%;
  float: right;
}

.mg-findcoordinates-editpanel-foundlist {
  height: 100%;
}

.mg-findcoordinates-editpanel-actionbuttons > .mg-findcoordinates-editpanel-foundlist--remove-all-btn {
  float: right;
}

.mg-findcoordinates-editpanel-foundlist--list-elem {
  margin-top: 4px;
  padding-left: 0;
  height: 88%;
  overflow-y: scroll;
}

.mg-findcoordinates-editpanel-foundlist--list-empty-msg {
  font-style: italic;
  text-align: center;
}

.mg-findcoordinates-editpanel-foundlist--heading {
  color: steelblue;
}

.mg-findcoordinates-editpanel-foundlist[data-count="0"] {
  height: 0%;
}

.mg-findcoordinates-editpanel-foundlist:not([data-count="0"])
.mg-findcoordinates-editpanel-foundlist--list-empty-msg {
  display: none;
}

.mg-findcoordinates-editpanel-foundlist--list-item {
  padding: 2px 6px;
  cursor: pointer;
  border-radius: 3px;
}

.mg-findcoordinates-editpanel-foundlist--list-item input {
  cursor: pointer;
  vertical-align: middle;
  margin: 0 5px 2px 0;
}

.mg-findcoordinates-editpanel-foundlist--list-item:hover {
  background-color: #f2f2f2;
  border-radius: 4px;
}

.mg-findcoordinates-editpanel-foundlist--list-item.selected {
  background-color: #39b9eb;
}

.mg-findcoordinates-editpanel-foundlist--list-item button.remove-btn {
  float: right;
  background: transparent;
  padding: 0;
  margin-top: 1px;
}



/* ------------------ *
 * FeatureReview tool *
 * ------------------ */

.mg-feature-review-diff__deleted,
.mg-feature-review-diff__inserted,
.mg-feature-review-diff__updated {
  padding: 15px;
  margin: 0 0 10px 0;
}

.mg-feature-review-form .input-container {
  padding: 0;
}

.modal.mg-feature-review-modal {
  bottom: 60px;
  left: 2px;
  top: auto;
}

.mg-feature-review-summary-switcher {
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
}

.mg-feature-review-summary-switcher__header {
  flex: 0 0;
}

.mg-feature-review-summary-switcher__body {
  flex: auto;
}

.mg-feature-review-summary-browser {
  height: 100%;
}

.mg-feature-review-summary--reviewrequired .mg-tab__review .mg-tab-label::after {
  content: "*";
}

/******************************
 * Feature coordinates editor *
 ******************************/

/* MODAL */

div.mg-coordinates-editor-modal > .modal-dialog {
  width: 500px;
}

div.mg-coordinates-editor-modal .modal-body {
  text-align: center;
}

div.mg-coordinates-editor-modal .mg-coordinates-editor-error {
  padding: 10px;
}

div.mg-coordinates-editor-modal .mg-coordinates-editor-error {
  display: none;
}

div.mg-coordinates-editor-modal--invalid .btn-primary {
  cursor: not-allowed;
  pointer-events: none;
  opacity: 0.65;
  filter: alpha(opacity=65);
  -webkit-box-shadow: none;
  box-shadow: none;
}

/* OUTER DIV */

.mg-coordinates-editor {
  position: relative;
}

.mg-coordinates-editor--disabled .mg-coordinates-editortable,
.mg-coordinates-editor--disabled .mg-coordinates-editortablerow__clipboard-transfer-zone {
  pointer-events: none;
}

/** TABLE */

.mg-coordinates-editortable {
  margin: 0 auto 10px auto;
  --cell-spacing: 4px;
  min-width: 390px;
}

.mg-coordinates-editortable td {
  padding: var(--cell-spacing);
}

.mg-coordinates-editortable div {
  display: inline-block;
}

/** ROW */

.mg-coordinates-editortable__heading {
  font-weight: bold;
}

.mg-coordinates-editortable__add {
  background-color: #ddeff5;
}


/** COORDINATE */

.mg-coordinates-coordinate {
  margin: 0;
  padding: 0;
  width: 160px;
  vertical-align: top;
}

.mg-coordinates-editortable .mg-coordinates-coordinate + .mg-coordinates-coordinate {
  margin-left: var(--cell-spacing);
}

.mg-coordinates-editortable .mg-coordinates-coordinate__help-container {
  display: block;
  font-size: 12px;
}

.mg-coordinates-coordinate:not(.mg-coordinates-coordinate--valid) > .mg-coordinates-coordinate__help-container {
  font-weight: bold;
}

/** COORDINATE INPUT */

.mg-coordinates-coordinate__input {
  border-radius: 4px;
  border: 1px solid;
  text-align: right;
  font-size: 15px;
  padding: 2px;
  text-transform: uppercase;
}

.mg-coordinates-coordinate.mg-coordinates-coordinate--valid > .mg-coordinates-coordinate__input {
  border-color:  #cccccc;
}

.mg-coordinates-coordinate:not(.mg-coordinates-coordinate--valid) > .mg-coordinates-coordinate__input {
  border-width: 2px;
}

/** ACTIONS */

.mg-coordinates-editortablerow__reorder,
.mg-coordinates-editortablerow__actions {
  vertical-align: text-bottom;
}

.mg-coordinates-editortablerow__action-button {
  cursor: pointer;
  margin: 3px;
  padding: 1px 4px;
}

.mg-coordinates-editortablerow__action-button + .mg-coordinates-editortablerow__action-button {
  margin-left: 10px;
}

.mg-coordinates-editortablerow__action-button[data-action="add"] {
  margin-top: 4px;
}

.mg-coordinates-editortablerow__reorder-handle {
  cursor: -webkit-grab;
  cursor:-moz-grab;
  cursor: grab;
}

.mg-coordinates-editortablerow__reorder-handle:active {
  cursor: -webkit-grabbing;
  cursor:-moz-grabbing;
  cursor: grabbing;
}

.mg-coordinates-editortable--at-min-num-rows .mg-coordinates-editortablerow__action-button[data-action="delete"] {
    display: none;
}

/** CLIPBOARD TRANSFER ZONE */

.mg-coordinates-editortablerow__clipboard-transfer-zone {
  resize: none;
  width: 24px;
  border: 1px dashed;
  overflow-y: clip;
  font-family: Arial, FontAwesome;
  height: 28px;
  background: transparent;
  transition: auto;
}

.mg-coordinates-editortablerow__clipboard-transfer-zone[data-drag-active="true"],
.mg-coordinates-editortablerow__clipboard-transfer-zone:focus
{
  border: 2px dashed black;
  background-color: white;
}

/** GEOMETRY VALIDATION WARNING */

.mg-coordinates-editortable__invalid-geometry {
  display: none;
}

.mg-coordinates-editortable__alert-invalid-geometry {
  font-size: 13px;
  font-weight: bold;  
  margin-bottom: -30px;
  margin-top: 8px;
  padding-block: inherit;
}

/* ---------------- *
 * Rich Text Editor *
 * ---------------- */

.mg-result-longlist-resultctn td .mg-richtexteditor-editor .ql-toolbar {
  display: none;
}

.mg-result-longlist-resultctn td .mg-richtexteditor-editor .ql-container {
  border: none;
  height: auto;
}

.mg-result-longlist-resultctn td .mg-richtexteditor-editor .ql-editor {
  padding: 0;
}

/* -------- *
 * Patterns *
 * -------- */

.mg-pattern-recordpanel.modal {
  top: 60px;
}

.mg-pattern-recordpanel.modal .modal-content {
  min-height: auto;
}

.mg-pattern-recordpanel-popup__content .table {
  margin: 0 0 1rem 0;
}

.mg-pattern-recordpanel-popup__content .table:last-child {
  margin: 0;
}

.mg-pattern-recordpanel-popup__content .mg-result-longlist-recordsfound {
  display: none;
}

.mg-pattern-recordpanel-popup__container {
  background-color: white;
  padding: 0.1rem;
  /*width: 30rem;*/
  -webkit-box-shadow: 2px 2px 2px 0 rgba(100, 100, 100, 0.75);
  -moz-box-shadow: 2px 2px 2px 0 rgba(100, 100, 100, 0.75);
  box-shadow: 2px 2px 2px 0 rgba(100, 100, 100, 0.75);
  border-radius: 10px;
}

.mg-pattern-recordpanel-popup__container > div {
  margin: 0.3rem;
}

.mg-pattern-recordpanel-popup__header,
.mg-pattern-recordpanel-popup__footer {
  background-color: darkslategrey;
  border: 0.1rem solid #ccc;
  color: white;
  padding: 0.5rem;
}

.mg-pattern-recordpanel-popup__header-title {
  display: inline-block;
  font-weight: bold;
  position: relative;
  width: calc(100% - 1rem);
}

.mg-pattern-recordpanel-popup__btn-close {
  color: white;
  display: inline-block;
  position: relative;
  width: 1rem;
}

.mg-pattern-recordpanel-popup__btn-close:hover {
  color: #eee;
}

.mg-pattern-recordpanel-popup__content {
  overflow-y: auto;
  padding: 5px;
  max-height: calc(var(--max-height));
  width: 400px;
}

.mg-pattern-recordpanel-popup__arrow {
  border-left: 1.5rem solid transparent;
  border-right: 1.5rem solid transparent;
  border-top: 1.5rem solid #fff;
  height: 0;
  margin: 0 auto;
  width: 0;
  transform: scaleY(-1);
}


/* --------------- *
 * BasemapSwitcher *
 * ----------------*/

 .mg-basemapswitcher-panel {
  --minimap-size: 85px;
  --minimap-margin: 5px;
  --minimap-border: 5px;
  padding: 10px;
}

.mg-basemapswitcher-panel.dropdown-menu {
  min-width: 0px;
}

 .mg-basemapswitcher-panel__minimap-container {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   justify-items: start;
   max-height: calc((var(--minimap-size) + var(--minimap-margin) * 2) * 3);
   overflow: auto;
}

 .mg-basemapswitcher-minimap {
   display: block;
   position: relative;
   box-sizing: border-box;
   width: var(--minimap-size);
   height: var(--minimap-size);
   margin: var(--minimap-margin);
   padding: 0;
   box-shadow: 2px 2px 2px 0 rgba(100, 100, 100, 0.75);
   cursor: pointer;
   border-radius: var(--minimap-border);
   border: var(--minimap-border) solid transparent;
 }

 .mg-basemapswitcher-minimap.active {
  border: var(--minimap-border) solid #39b9eb;
}

.mg-basemapswitcher-minimap__title {
  display: block;
  position: absolute;
  width: calc(var(--minimap-size) - var(--minimap-border) * 2);
  bottom: 0px;
  z-index: 1;
  background-color: #ffffff99;
  font-size: 0.8em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}