/* ==========================================================================
   evival Technologies GmbH
   ========================================================================== */

/* 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;
}

/* TRANSPARENZ-CONTROLS
---------------------------------------------------------------*/
.transparency-controls {
    position: absolute;
    top: 568px;
    left: 140px;
    /* bottom: 8px; */
    /* background: rgba(255,255,255,0.9); */
    /* border-radius: 4px;
    padding: 0; */
}

.transparency-controls 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;
    /* background: #fff;
    border: 2px solid rgba(0,60,136,.5);
    border-radius: 2px;
    color: #333;
    cursor: pointer;
    font-size: 11px;
    font-weight: 700;
    height: 44px;
    padding: 8px 12px;
    min-width: 120px;
    text-align: center;
    transition: all 0.2s ease;
    white-space: nowrap; */
}

.transparency-controls:hover {
    background-color: rgb(0, 60, 136);
    cursor: pointer;
    border-radius: 4px;
    border: none;
    /* background: #f4f4f4;
    border-color: rgba(0,60,136,.7); */
}

.transparency-panel {
    position: absolute;
    bottom: 50px;
    left: 0;
    background: white;
    border: 2px solid rgba(0,60,136,.5);
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    padding: 10px;
    min-width: 220px;
    z-index: 1000;
}

.transparency-header {
    font-weight: bold;
    font-size: 12px;
    color: #333;
    margin-bottom: 10px;
    padding-bottom: 5px;
    border-bottom: 1px solid #eee;
}

.transparency-item {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    font-size: 11px;
}

.transparency-item label {
    flex: 0 0 110px;
    font-weight: normal;
    margin: 0;
    color: #555;
}

.transparency-sub-item label {
    padding-left: 15px;
}

.transparency-item input[type="range"] {
    flex: 1;
    margin: 0 8px;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: #ddd;
    border-radius: 2px;
    outline: none;
}

.transparency-item input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    background: #003c88;
    border-radius: 50%;
    cursor: pointer;
}

.transparency-item input[type="range"]::-moz-range-thumb {
    width: 14px;
    height: 14px;
    background: #003c88;
    border-radius: 50%;
    border: none;
    cursor: pointer;
}

.transparency-item .opacity-value {
    flex: 0 0 35px;
    text-align: right;
    font-size: 10px;
    color: #666;
}

/* 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,
.backgroundButtonItemInactive button,
.backgroundButtonItemActive 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,
.backgroundButtonItemInactive,
.backgroundButtonItemActive{
  position: absolute;
}

.birdsEyeViewItemInactive{top: 568px;left: 234px;}
.zoomToLayerItemInactive{top: 568px;left: 10px;}
.moveButtonItemInactive{top: 568px;left: 130px;}
.cadastreButtonItemInactive{top: 568px;left: 312px;}
.backgroundButtonItemInactive{top: 568px;left: 420px;}
.backgroundButtonItemActive{top: 568px;left: 420px;}

.birdsEyeViewItemInactive:hover,
.zoomToLayerItemInactive:hover,
.moveButtonItemInactive:hover,
.cadastreButtonItemInactive:hover,
.backgroundButtonItemInactive:hover,
.backgroundButtonItemActive: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,
.backgroundButtonItemInactive:focus, .backgroundButtonItemInactive button:focus,
.backgroundButtonItemActive:focus, .backgroundButtonItemActive button:focus{
  outline: none;
}

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

/* Deaktivierte Kataster-Button Styles */
.cadastreButtonItemInactive.cadastre-disabled,
.cadastreButtonItemInactive.cadastre-disabled:hover{
  background-color: rgba(128, 128, 128, 0.5) !important;
  color: #999 !important;
  cursor: not-allowed !important;
  opacity: 0.6 !important;
}

.cadastreButtonItemInactive.cadastre-disabled button,
.cadastreButtonItemInactive.cadastre-disabled button:hover{
  background-color: rgba(128, 128, 128, 0.5) !important;
  color: #999 !important;
  cursor: not-allowed !important;
  opacity: 0.6 !important;
}

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;
}

.btn-down {
  margin-left: auto !important;
}

/* 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}
}