ul.content {top: 0; width:100%; height: calc(50vh - (var(--header_height) / 2)); display: block; list-style: none; padding: 0; margin: 0; overflow: hidden; background-color: #ffffff; border-bottom: 2px solid #ffffff;}
ul.content > li.menu {width: 0%; display: block; overflow: hidden; float: left; margin-left: 0px;}
ul.content > li.gis {width: 70%; height: inherit; display: block; overflow: hidden; float: left; margin-left: 0px; position:relative;}
ul.content > li.gis > .layers {position: absolute; width: 30%; height: 100%; display: none; left: 0; top: 0; background-color: rgba(255,255,255,1); padding: 0.5rem; z-index: 2; font-size: 1rem; overflow-y: auto;}
ul.content > li.gis > .layers > .layers-close {text-align: right; color: #fff; font-weight: 700; text-decoration: none; font-size: 1rem;}
ul.content > li.gis > .layers > .layers-close > button {color: #fff; font-weight: 700; text-decoration: none; text-align: center; height: 2em; width: 2em; line-height: .4em; background-color: rgba(0,60,136,.5); border: none; border-radius: 2px;}
ul.content > li.gis > .layers > .layer {margin: 0.5rem;}

ul.content > li.gis > .layers > .layer > label {font-size: inherit; line-height: 1rem;}
ul.content > li.gis > .layers > .layer > a {float: right;}
ul.content > li.gis > .layers > .layer > a:after {content: '+';}
ul.content > li.gis > .layers > .layer > a.active:after {content: '-';}
ul.content > li.gis > .layers > .layer_info {display: none;}
ul.content > li.gis > .controls {position: absolute; right: 1rem; width: 4rem; height: 4rem; background-color: #f5f5f5; border: 1px solid #666666; border-radius: 0.3rem;  z-index: 2;  font-size: 3rem; color: #666666; text-align:center}
ul.content > li.gis > .controls:hover {border: 1px solid #333333; color: #333333} 
ul.content > li.gis > .controls.lock, ul.content > li.gis > .controls.unlock {top: 1rem;}
ul.content > li.gis > .controls.lock {background-color: #bf4a4a;}
ul.content > li.gis > .controls.lock > span:after {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); content: '\023f5';}
ul.content > li.gis > .controls.unlock > span:after {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); content: '\023f8';}
ul.content > li.gis > .controls.list {top: 6rem;}
ul.content > li.gis > .controls.list > span:after {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); content: '\2750';}
/* ul.content > li.gis > .controls.map-lock {top: 1rem;} */
/* ul.content > li.gis > .controls.map-lock:after {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); content: '\023f5'; font-weight: bold;} */
/* ul.content > li.gis > .controls.map-unlocked:after {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); content: '\023f8'; font-weight: bold;} */

/* ul.content > li.gis > .clicked {position: absolute; width: 50%; height: 100%; display: none; right: 0; top: 0; background-color: rgba(255,255,255,0.8); padding: 25px 4px 4px 4px; z-index: 3;} */
/* ul.content > li.gis > .clicked > .list {width: 100%; border-spacing: 1px 1px; border-collapse: separate;} */
/* ul.content > li.gis > .clicked > .list tr th {padding: 4px; color: #425b76; font-size: 14px; font-weight: bold; text-align: left; background-color: #b0c1d4; vertical-align: middle;} */
/* ul.content > li.gis > .clicked > .list tr td {padding: 4px; font-size: 12px;} */
/* ul.content > li.gis > .clicked > .list tr td.actions {white-space: nowrap;} */
/* ul.content > li.gis > .clicked > .list tr td.actions a img.icon_action {height: 25px;} */
ul.content > li.data {width: 30%; height: 100%; display: block; overflow: hidden; float: left; margin-left: 0px; position:relative;}
ul.content > li.data > .search {height: 110px; overflow: hidden;}
ul.content > li.data > .search::-webkit-scrollbar{background:transparent;height:8px;width:8px}
ul.content > li.data > .search::-webkit-scrollbar-thumb{background:transparent;border:none;-webkit-border-radius:0px;border-radius:0px;-webkit-box-shadow:none;box-shadow:none}
ul.content > li.data > .search:hover::-webkit-scrollbar-thumb{background-color:rgba(66,91,118,0.38)}
ul.content > li.data > .search::-webkit-scrollbar-thumb:hover{background-color:rgba(66,91,118,0.541)}
ul.content > li.data > .search > .form-row{padding: 4px; overflow: hidden;}
ul.content > li.data > .search > .form-row > .label{float:left; width: 20%; text-align: right; padding-right: 4px;}
ul.content > li.data > .search > .form-row > .input{float:left; width: 80%; text-align: left;}
ul.content > li.data > .search > .form-row > .input > input {width: 100%}
ul.content > li.data > .selected {height: calc((50vh - 110px - (var(--header_height) / 2)) / 2); overflow-y: auto}
ul.content > li.data > .selected::-webkit-scrollbar{background:transparent;height:8px;width:8px}
ul.content > li.data > .selected::-webkit-scrollbar-thumb{background:transparent;border:none;-webkit-border-radius:0px;border-radius:0px;-webkit-box-shadow:none;box-shadow:none}
ul.content > li.data > .selected:hover::-webkit-scrollbar-thumb{background-color:rgba(66,91,118,0.38)}
ul.content > li.data > .selected::-webkit-scrollbar-thumb:hover{background-color:rgba(66,91,118,0.541)}
ul.content > li.data > .selected > .list {width: 100%; border-spacing: 1px 1px; border-collapse: separate;}
ul.content > li.data > .selected > .list tr th {padding: 4px; color: #425b76; font-size: 14px; font-weight: bold; text-align: left; background-color: #b0c1d4; vertical-align: middle;}
ul.content > li.data > .selected > .list tr td {padding: 4px; font-size: 12px;}
ul.content > li.data > .selected > .list tr td.actions {white-space: nowrap;}
ul.content > li.data > .selected > .list tr td.actions a img.icon_action {height: 25px;}
ul.content > li.data > .clicked {height: calc((50vh - 110px - (var(--header_height) / 2)) / 2); overflow-y: auto}
ul.content > li.data > .clicked::-webkit-scrollbar{background:transparent;height:8px;width:8px}
ul.content > li.data > .clicked::-webkit-scrollbar-thumb{background:transparent;border:none;-webkit-border-radius:0px;border-radius:0px;-webkit-box-shadow:none;box-shadow:none}
ul.content > li.data > .clicked:hover::-webkit-scrollbar-thumb{background-color:rgba(66,91,118,0.38)}
ul.content > li.data > .clicked::-webkit-scrollbar-thumb:hover{background-color:rgba(66,91,118,0.541)}
ul.content > li.data > .clicked > .list {width: 100%; border-spacing: 1px 1px; border-collapse: separate;}
ul.content > li.data > .clicked > .list tr th {padding: 4px; color: #425b76; font-size: 14px; font-weight: bold; text-align: left; background-color: #b0c1d4; vertical-align: middle;}
ul.content > li.data > .clicked > .list tr td {padding: 4px; font-size: 12px;}
ul.content > li.data > .clicked > .list tr td.actions {white-space: nowrap;}
ul.content > li.data > .clicked > .list tr td.actions a img.icon_action {height: 25px;}

.map {width: 100%; height: 100%; z-index: 1; position: relative;}

.layers_features_view::after {background: url(../images/icon_view.png) no-repeat left center;}
.layers_features_pin::after {background: url(../images/icon_pin.png) no-repeat left center;}
.layers_features_pin_delete::after {background: url(../images/icon_delete.png) no-repeat left center;}
.layers_features_edit::after {background: url(../images/icon_write.png) no-repeat left center;}
.layers_features_download::after {background: url(../images/icon_write.png) no-repeat left center;}
.layers_features_view::after, .layers_features_pin::after, .layers_features_pin_delete::after, .layers_features_edit::after, .layers_features_download::after {padding-left: 25px; content: ''; background-size: 25px;}
.layers_features_view:hover, .layers_features_pin:hover, .layers_features_pin_delete:hover, .layers_features_edit:hover, .layers_features_download:hover {cursor: pointer;}

.geoserver-data {width: 100%; border-collapse: collapse;}
.geoserver-data th, .geoserver-data td {
  border: 1px solid #ccc;
}

.feature-title {height: calc(2vh); background-color: #425b76; padding: 0 4px; color: #ffff00; overflow: hidden; font-size: 1rem; line-height: 2vh;}
.feature-title > .layers_features_pin::after {background: url("../images/icon_pin_yellow.png") no-repeat left center; background-size: 25px;}
.feature-title > .layers_features_edit::after {background: url("../images/icon_write_yellow.png") no-repeat left center; background-size: 25px;}
.feature-title > .layers_features_download::after {background: url("../images/icon_download_yellow.png") no-repeat left center; background-size: 25px;}

.feature-info {position: relative; height: calc(48vh - (var(--header_height) / 2)); overflow: hidden;}
/* .feature-info > .title {background-color: #425b76; padding: 8px; 6px; color: #ffff00;} */
/* .feature-info > .title > .layers_features_pin::after {background: url("../images/icon_pin_yellow.png") no-repeat left center; background-size: 25px;} */
/* .feature-info > .title > .layers_features_edit::after {background: url("../images/icon_write_yellow.png") no-repeat left center; background-size: 25px;} */
/* .feature-info > .title > .layers_features_download::after {background: url("../images/icon_download_yellow.png") no-repeat left center; background-size: 25px;} */


.feature-info > .menu {float: left; background-color: #ffffff; width: 15%; height: 100%; overflow-y: auto;}
.feature-info > .menu::-webkit-scrollbar{background:transparent;height:8px;width:8px}
.feature-info > .menu::-webkit-scrollbar-thumb{background:transparent;border:none;-webkit-border-radius:0px;border-radius:0px;-webkit-box-shadow:none;box-shadow:none}
.feature-info > .menu:hover::-webkit-scrollbar-thumb{background-color:rgba(66,91,118,0.38)}
.feature-info > .menu::-webkit-scrollbar-thumb:hover{background-color:rgba(66,91,118,0.541)}
.feature-info > .menu button {display: block; background-color: inherit; color: black; padding: 8px 6px; width: 100%; border: none; outline: none; text-align: left; cursor: pointer; transition: 0.3s;}
.feature-info > .menu button:hover {background-color: #eaf0f6;}
.feature-info > .menu button.active {background-color: #b0c1d4; font-weight: bold;}
.feature-info > .content {position: relative; float: left; border-left: 2px solid #b0c1d4; width: 85%; height: 100%; display: block; overflow-y: auto;}
.feature-info > .content::-webkit-scrollbar{background:rgba(66,91,118,0.38);height:8px;width:8px}
.feature-info > .content::-webkit-scrollbar-thumb{background:rgba(66,91,118,0.541);border:none;-webkit-border-radius:0px;border-radius:0px;-webkit-box-shadow:none;box-shadow:none}
.feature-info > .content:hover::-webkit-scrollbar-thumb{background-color:rgba(66,91,118,0.38)}
.feature-info > .content::-webkit-scrollbar-thumb:hover{background-color:rgba(66,91,118,0.541)}
.feature-info > .content .record_list {padding: 0px; font-size: 1rem;}
.feature-info > .content .record_list tr:first-child {position: sticky; top: 0;}
.feature-info > .content .record_list tr th {padding: 8px;}
/* .feature-info > .content .record_list tr th.the_geom {padding: 32px;} */
.feature-info > .content .record_list tr td {padding: 8px;}
.feature-info > .content .record_list tr.details {display: none; vertical-align: top;}
.feature-info > .content .record_list tr.details td {background-color: #f2f5f8;}
.feature-info > .content .record_list tr td a.layers_features_pin {margin-right: 50px;}/*unica soluzione al momento per non far andare le icone oltre lac colonna, UPDATE: non funziona*/

.feature-info > .content .record_sublist {padding: 0px; font-size: 1rem;}
.feature-info > .content .record_sublist tr th {padding: 8px; font-weight: bold;}
.feature-info > .content .record_sublist > tr > td {padding: 8px;}

.feature-info .content > .record {width: 100%}
.feature-info .content > .record > tbody > tr > td:nth-child(1) {position: relative; vertical-align: top; width: 250px; background-color: #f2f5f8; color: #333333; font-weight: bold; padding-right: 25px;}
.feature-info .content > .record > tbody > tr > td:nth-child(2) {background-color: #f2f5f8; color: #333333;}

.nominatim {width: 100% background-color: #ffffff;}
.nominatim > * {vertical-align : middle;}
.nominatim > input[type="text"] {width: 450px;}
.nominatim ul {position:absolute; color: #333; font-size: 1rem; width: 450px; list-style: none; padding: 0; margin: 0; display: block; clear: both; cursor: pointer; overflow-x: hidden; z-index: 1; background: #fff}
.nominatim ul li {padding: 10px 4px 4px 4px; border-bottom: 1px solid #f2f5f8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.nominatim ul li:hover {background-color: #b0c1d4;}
/* .tab { */
  /* float: left; */
  /* background-color: #ffffff; */
  /* width: 15%; */
  /* height: 300px; */
/* } */

/* /* Style the buttons that are used to open the tab content */ */
/* .tab button { */
  /* display: block; */
  /* background-color: inherit; */
  /* color: black; */
  /* padding: 8px 6px; */
  /* width: 100%; */
  /* border: none; */
  /* border-right: 2px solid #b0c1d4; */
  /* outline: none; */
  /* text-align: left; */
  /* cursor: pointer; */
  /* transition: 0.3s; */
/* } */

/* /* Change background color of buttons on hover */ */
/* .tab button:hover { */
  /* background-color: #eaf0f6; */
/* } */

/* /* Create an active/current "tab button" class */ */
/* .tab button.active { */
  /* background-color: #b0c1d4; */
/* } */

/* /* Style the tab content */ */
/* .tabcontent { */
  /* float: left; */
  /* padding: 0px 12px; */
  /* border-left: 2px solid #b0c1d4; */
  /* width: 85%; */
  /* display: block; */
  /* margin-left: -2px; */
/* } */

/* .tabcontent ~ .tabcontent {display:none;} */

/* .tabcontent table tr {border-bottom: 1px solid #f2f5f8; vertical-align: top;} */
/* .tabcontent table tr th {padding:4px; background-color: #b0c1d4; color: #425b76;} */
/* .tabcontent table tr td {padding:4px;} */
/* .tabcontent table tr.details {display: none; vertical-align: top;} */
/* .tabcontent table tr.details td {background-color: #f2f5f8;} */

/* .ol-popup { */
  /* position: absolute; */
  /* background-color: white; */
  /* -webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2)); */
  /* filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2)); */
  /* padding: 15px; */
  /* border-radius: 10px; */
  /* border: 1px solid #cccccc; */
  /* bottom: 12px; */
  /* left: -50px; */
  /* min-width: 280px; */
/* } */
/* .ol-popup:after, .ol-popup:before { */
  /* top: 100%; */
  /* border: solid transparent; */
  /* content: " "; */
  /* height: 0; */
  /* width: 0; */
  /* position: absolute; */
  /* pointer-events: none; */
/* } */
/* .ol-popup:after { */
  /* border-top-color: white; */
  /* border-width: 10px; */
  /* left: 48px; */
  /* margin-left: -10px; */
/* } */
/* .ol-popup:before { */
  /* border-top-color: #cccccc; */
  /* border-width: 11px; */
  /* left: 48px; */
  /* margin-left: -11px; */
/* } */
/* .ol-popup-closer { */
  /* text-decoration: none; */
  /* position: absolute; */
  /* top: 2px; */
  /* right: 8px; */
/* } */
/* .ol-popup-closer:after { */
  /* content: "✖"; */
/* } */