/* ==========================================================================
   evival Technologies GmbH & Co. KG
   ========================================================================== */

/* SCAFFOLDING
---------------------------------------------------------------*/
html{height: 100%}
body{padding: 70px 0 30px}
body.api{padding: 0;height: 100%}

/* GLOBAL
---------------------------------------------------------------*/
a:hover{text-decoration: none}
.modal-backdrop{background-color: rgba(0,0,0,0.55)}
.page-header{margin-top: 0}
.page-header h1{margin-top: 0;font-size: 30px}
h6{font-weight: 700}

/* NAVIGATION
---------------------------------------------------------------*/
.navbar-brand{padding: 5px 30px}
.navbar #email{width: 300px}

/* MAPS
---------------------------------------------------------------*/
.map-container{padding: 0;height: 100%;position: relative;page-break-after: always}
.map-spinner{position: absolute;top: 0;left: 0;width: 100%;height: 600px;background-color: #F5F5F5;z-index: 99999;text-align: center}
.map-spinner img{padding-top: 35%}
#map{width: 100%;height: 600px}
.olControlAttribution{bottom: 0!important;}
.ol-control{
  width: max-content !important;
}

/* API
---------------------------------------------------------------*/
.api #map{height: 100%}
.api .legend{position: absolute;bottom: 0;left: 0;;background: #fff;border-top: 1px solid #666;border-right: 1px solid #666;z-index: 999999}
.api .legend-table{margin: 5px;font-size: 12px;border-spacing: 2px;border-collapse: separate}
.api .legend-table .legend-label{font-weight: bold;}
.api .legend-table .color{width: 10px}
.api .legend-table .text{text-shadow: none;padding: 0 15px 0 5px}

/* UNIT LIST
---------------------------------------------------------------*/
.unit-list{margin-top: 20px}

/* UNIT SUMMERY
---------------------------------------------------------------*/
.panel > .list-group .list-group-item{
  padding-right: 4px;
}

/* MAP
---------------------------------------------------------------*/
.ol-attribution{
  position: absolute;
  bottom: 0;
  right: 12px;
}

.ol-attribution button{
  display: none;
}

.ol-attribution ul{
  list-style: none;
  display: flex;
  margin-bottom: 2px;
  font-size: 12px;
}

.ol-attribution ul li{
  float: left;
  padding-left: 5px;
}

/* Profile
---------------------------------------------------------------*/
.profile .map-settings .form-check{
  padding-top: 7px;
}

.profile .map-settings .form-check-label{
  padding-right: 12px;
}

.profile .map-settings .panel-body{
  padding-top: 24px;
}

.profile .map-settings .form-group{
  margin-bottom: 17px;
}

/* UNIT
---------------------------------------------------------------*/
.pagination{margin: 0}
.table-left{width: 33.33%;float: left}
.label{text-shadow: 1px 1px 0 #666}
.legend-item,
.add-note,
.remove-highlight{cursor: pointer}
.legend-item.active td{background-color: lightpink!important;}

.birdsEyeViewItemInactive button,
.zoomToLayerItemInactive button,
.moveButtonItemInactive button,
.cadastreButtonItemInactive button{
  height: 22px;
  background-color: rgba(0, 60, 136, 0.5);
  color: #fff;
  border-radius: 4px;
  padding: 0px 6px;
  margin: 1px;
  font-size: 14px;
  font-weight: bold;
  line-height: 18px;
  border: none;
}

.birdsEyeViewItemInactive,
.zoomToLayerItemInactive,
.moveButtonItemInactive,
.cadastreButtonItemInactive{
  position: absolute;
}

.birdsEyeViewItemInactive{top: 568px;left: 130px;}
.zoomToLayerItemInactive{top: 568px;left: 10px;}
.cadastreButtonItemInactive{top: 568px;left: 212px;}
/* .moveButtonItemInactive{top: 568px;left: 130px;} */

.birdsEyeViewItemInactive:hover,
.zoomToLayerItemInactive:hover,
.moveButtonItemInactive:hover,
.cadastreButtonItemInactive:hover{
  background-color: rgb(0, 60, 136);
  cursor: pointer;
  border-radius: 4px;
  border: none;
}

.birdsEyeViewItemInactive:focus, .birdsEyeViewItemInactive button:focus,
.zoomToLayerItemInactive:focus, .zoomToLayerItemInactive button:focus,
.moveButtonItemInactive:focus, .moveButtonItemInactive button:focus,
.cadastreButtonItemInactive:focus, .cadastreButtonItemInactive button:focus{
  outline: none;
}

.moveButtonItemInactive.activated,
.cadastreButtonItemInactive.activated{
  background-color: rgb(0, 60, 136);
  border-radius: 4px;
  border: none;
  outline: none;
}

div.olControlZoom {
  position: absolute;
  top: 8px;
  left: 8px;
  background: rgba(255,255,255,0.4);
  border-radius: 4px;
  padding: 2px;
}
div.olControlZoom button {
  display: block;
  margin: 1px;
  padding: 0;
  color: white;
  font-size: 17px;
  font-family: 'Lucida Grande', Verdana, Geneva, Lucida, Arial, Helvetica, sans-serif;
  font-weight: bold;
  text-decoration: none;
  text-align: center;
  height: 23px;
  width:23px;
  line-height: 19px;
  background: #130085; /* fallback for IE - IE6 requires background shorthand*/
  background: rgba(0, 60, 136, 0.5);
  filter: alpha(opacity=80);
  border: none;
  border-radius: 4px;
}
div.olControlZoom button:hover {
  background: #130085; /* fallback for IE */
  background: rgba(0, 60, 136, 0.7);
  filter: alpha(opacity=100);
}
@media only screen and (max-width: 600px) {
  div.olControlZoom button:hover {
    background: rgba(0, 60, 136, 0.5);
  }
}
button.olControlZoomIn {
  border-radius: 4px 4px 0 0;
}
button.olControlZoomOut {
  border-radius: 0 0 4px 4px;
}

#addNote textarea, #editNote textarea{width: 100%;min-height: 150px;resize: vertical;}
.note-list li p{margin: 10px 0;}
.note-list li span .icon-check{color: green}
.note-list li span .icon-check-empty{color: red}
.note-description{cursor: pointer}
.add-note .icon-edit{color: red}
.insert-link{margin-top: 5px;cursor: pointer}


/* Layer switcher
---------------------------------------------------------------*/
.layer-switcher{
  top: 2em;
  right: 0;
}

.layer-switcher li input{
  margin-top: 3px;
}

.layer-switcher .panel{
  background-color: rgb(0, 60, 136);
  color: white;
  border: none;
  border-radius: 0;
}

.layer-switcher button{
  background-color: rgba(0, 60, 136, 0.7);
  background-image: none;
}

.layer-switcher button{
  font-size: 20px;
  width: 32px;
  height: 32px;
}

.layer-switcher button:before{
  content: '\002B';
  color: white;
  font-size: 20px;
}

.layer-switcher.shown button:before{
  display: none;
}

.layer-switcher.shown.layer-switcher-activation-mode-click > button{
  background-color: rgba(0, 60, 136, 0.7);
  position: relative;
  color: white;
  margin: 0;
}

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


/* Measure
---------------------------------------------------------------*/
.measure ul.output li{
  display: flex;
}

.measure ul.output li div:nth-child(1){
  width: 6%;
  float: left;
  margin-top: 2px;
  height: max-content;
}

.measure ul.output li.image div:nth-child(1){
  margin-top: 0;
}

.measure ul.output li div:nth-child(2){
  width: 80%;
  float: left;
  padding-left: 5px;
}

.measure ul.output li.image div:nth-child(2){
  padding-top: 1px;
}

.measure ul.output li div:nth-child(3){
  width: 14%;
  float: left;
  padding-right: 10px;
}

#measure-popup{
  margin-top: 10px;
}

.ms-popup{
  padding-top: 0;
}

.ms-popup ul.output li div:nth-child(1){
  width: auto;
}

#measure-popup-close{
  display: none;
}

/* SORTABLE
---------------------------------------------------------------*/
table.sortable span.arrow {border-style: solid;border-width: 5px;display: block;position: absolute;top: 50%;right: 5px;font-size: 0;border-color: #ccc transparent transparent transparent;line-height: 0;height: 0;width: 0;margin-top: -2px}
table.sortable span.arrow.up{border-color: transparent transparent #ccc transparent;margin-top: -7px}
table.sortable thead th{cursor: pointer;position: relative;top: 0;left: 0}
table.sortable thead th:hover:not([data-defaultsort=disabled]){background: #efefef}
table.sortable thead th div.mozilla{position: relative}

@media print {
  .table-left{width: 100%;float: none}
}