/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 21 juil. 2015, 19:12:40
    Author     : antoine
*/

/* Couleurs Geophom :
  Vert clair : #ABD94B
  Vert foncé : #97CF1E
*/

body {
  color: #666666;
  font-family: Helvetica,Verdana,"Luxi sans","Lucida Grande",Lucida,"Lucida Sans Unicode",sans-serif;
  font-size: 1em;
}

#phom-page {
  display: flex;
  flex-flow: column wrap;
}

#phom-header {
  display: flex;
  flex-flow: row wrap;
  /* @dev 01/02/2023 Garder l’en-tête de la page visible quand on scroll vers le bas */
  position: fixed;
  background-color: #fff;
  width: 100%;
  z-index:9;
}

/* @GF 29/04/2024 position absolute pour garder le logo en haut à droite*/
#phom-logo {
  flex-grow: 1;
  position:absolute;
  right:0;
}

#phom-logo img {
  margin: 10px 10px 0 0;
  height:35px;
}

#phom-footer {
  position:fixed;
  bottom:0;
  width: 100%;
  height: 40px;
  border: solid 1px #999;
  margin: 2px;
}

#phom-projet {
  width: 100%;
  display: flex;
  flex-flow: row nowrap;
}

#phom-wrapper {
  position: fixed;
  top: 60px;
  height: 100%!important;
  width: calc(100% - 300px);
  flex-grow: 1;
  flex-flow: column wrap;
}

#phom-carte {
  border: solid 2px #999;
  -webkit-border-radius: 4px;
  border-radius: 4px;
}

#phom-legende {
  border: solid 2px #999;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  margin-top: 4px;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  max-height: 200px;
  overflow-y: auto;
}

#phom-legende {
  display:none;
}

.legende-visible {
  display:flex !important;
}

button#toggle-legende {
  font-size:0.8em;
}

.phom-legende-bloc {
  margin: 1px;
  flex-grow: 1;
  flex-flow: column wrap;
}

.phom-legende-type {
  font-size: 0.9em;
  font-weight: bold;
}

.phom-legende-parc {
  margin: 2px;
  font-size: 0.8em;
  cursor: pointer;
}

.phom-legende-picto {
  max-height: 22px; 
  vertical-align: middle;
}

.phom-legende-poly {
  max-height: 22px; 
  vertical-align: middle;
}

.phom-legende-nomparc {
  margin-left: 2px;
}

.phom-legende-parc input {
  margin: 2px;
}

#phom-liste {
  display: flex;
  flex-flow: row wrap;
  position: absolute;
  right: 0;
  top: 60px;
  flex-shrink: 0;
  white-space: wrap;
  /*height: calc(100% - 95px);*/
}

#phom-search {
  position: fixed;
  display: inline-block;
  flex-shrink: 0;
  width: 100%;
  /* @dev 01/02/2023 Garder l’en-tête de la page visible quand on scroll vers le bas */
  background-color: #fff;
  padding: 10px 0 5px 2px;
}

#phom-table {
  display: inline-block;
  margin-top: 35px;
  overflow-y: scroll;
  font-size: 0.8em;
}

.leaflet-control-layers-toggle {
  height: 26px;
  width: 26px;
}

/* @GF 2025 Picto layer custom */
.leaflet-bar + .leaflet-control-layers:not(:last-child) .leaflet-control-layers-toggle {
  background-size:contain;
  background-image: url('img/layer.png');
}

.home-control {
  box-shadow: 0 1px 5px rgba(0,0,0,0.4);
  background: #fff;
  border-radius: 5px;
}

.home-control .button {
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-image: url('img/home.png');
  display: block;
  width: 26px;
  height: 26px;
}

.monochrome-control, .monochrome-control .button {
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
  background-color: #fff;
  border-radius: 5px;
}

.monochrome-control .button {
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-image: url('img/oeil.png');
  display: block;
  width: 26px;
  height: 26px;
  transition:0.4s;
  background-color:white;
}

.monochrome-control .button:hover {
  cursor:pointer;
}

.monochrome-control .button.monochrome {
  background-image: url('img/oeil.png');
  filter:invert(1);
}

.leaflet-layer.monochrome img.leaflet-tile {
  filter:grayscale(1);
}

.position-control {
  background-color: rgba(255, 255, 255, 0.7);
  box-shadow: 0 1px 5px rgba(0,0,0,0.4);
  border-radius: 3px;
  padding: 0 5px;
  color: #222;
}

.parc-tooltip {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;

  background: white;
  border: solid 1px grey;
  padding: 2px;

  box-shadow: 0 1px 4px rgba(0,0,0,0.65);
  -webkit-border-radius: 4px;
  border-radius: 4px;
  
  display: none;
  opacity: 0.8;
  z-index: 2;
}

.parc-tooltip.visible {
  display: inline-block;
}

.priseDeVue {
  /*border: solid 1px;*/
  margin-left: auto;
}

.priseDeVue-picto {
  /*background-image: url('img/rond-bleu.png');*/
  background-repeat: no-repeat;
  vertical-align: middle;
  height: 10px;
}

.priseDeVue-label {
  position: absolute;
  color: #222;
  background-color: rgba(255, 255, 255, 0.8);
  border: solid 1px #222;
  border-radius: 3px;
  padding: 1px 1px 0 1px;
  text-align: center;
  white-space: nowrap;
  font: 12px Arial, Helvetica, sans-serif;
  margin-left: 8px;
  margin-top: -3px;
}

.divicon-prisedevue {
  margin-left: -50%;
  margin-top: -50%;
}

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


/* -----------------------
 * LISTE DES PHOTOMONTAGES
 * -----------------------
 */

table.tablesorter {
  background-color: #ffffff;
  border-collapse: collapse; 
  color: #444;
  padding-bottom: 30px;
}

table.tablesorter thead{
  color: #222;
}

table.tablesorter tbody {
  overflow-y: scroll;
}

table.tablesorter tbody tr {
  cursor: pointer;
}

table.tablesorter tbody td {
  border: 1px solid white;    
}

/* Séparateur vert entre chaque ligne */
table.tablesorter tbody tr td {
  border-bottom: solid 2px #BDDA83;
  padding: 3px 5px;
  min-width: 25px;
  text-align: right;
  max-width: 250px;
  white-space: nowrap;
  overflow-x: hidden;
}

table.tablesorter tbody tr:hover {
  background-color: #E0E0E0;
}

table.tablesorter tbody .phom-list-item-selected {
  background-color: #E0E0E0;
}

/* ----------------
 * TYPEAHEAD SEARCH
 * ----------------
 * Styles source: http://twitter.github.io/typeahead.js/examples/
 */
input.typeahead,
.tt-query,
.tt-hint {
  width: 100%;
  padding: 2px;
  font-size: 1.1em;
  border: 2px solid #ccc;
  -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
          border-radius: 5px;
  outline: none;
}

.typeahead {
    background-color: #fff;
}

.typeahead:focus {
  border: 2px solid #808080;
  -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
          border-radius: 5px;
}

.tt-query {
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

.tt-hint {
  color: #bbb
}

.tt-menu {
  z-index:1001 !important;
  width: 300px;
  margin: 4px 0;
  padding: 0px 0;
  background-color: #fff;
  border: 2px solid #bbb;
  -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
     -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
          box-shadow: 0 5px 10px rgba(0,0,0,.2);
}

.tt-suggestion {
  padding: 3px 20px;
  font-size: 1em;
}

.tt-suggestion.tt-cursor,
.tt-suggestion:hover {
  color: #222;
  background-color:#B7E6A8;
}

.tt-suggestion p {
  margin: 0;
}

/* -------------------------
 *  Personalisations GEOPHOM
 * -------------------------
 */
 
/* SURCHARGES */

#phom-logo img {
  height:20px;
}

#phom-carte, #phom-legende {
  border:1px solid #999;
  margin-bottom:2px;
}

#phom-footer {
  margin:0;
  bottom:0px;
  border:0px;
  height:36px;
  display:flex;
  flex-flow:row nowrap;
  align-items:center;
}

input.typeahead {
  font-size:0.8em;
}

table.tablesorter thead tr th{
  font-size: 0.85em;
}


/* AJOUTS */

h2 {
  background-color:#f0f0f0;
  border:1px solid #aaa;
  font-size : 1.3em;
  margin : 5px;
  padding:5px 5px 0;
  border-radius:4px;
} 

#retour_accueil a img{
  padding: 15px 5px 5px;
}

#titre_carte {
  font-size:1.3em;
  margin: 10px 30px;
}

/* @GF 29/04/2024 retrait position absolute pour éviter la superposition des éléments */
#dates_maj {
  font-size:0.8em;
  margin: 10px 10px;
  text-align:right;
  display:flex;
  align-items:center;
  padding-right:88px;
}

#phom-wrapper {
  /* top:40px; */
  /* @patch 14/02/2023 correction hauteur un peu masqué sous le header */
  top:50px; 
}

#phom-liste {
  /* top:40px; */
  /* @patch 14/02/2023 correction hauteur un peu masqué sous le header */
  top:44px; 
  background-color: #fff;
}

body {
  margin-top:0;
}

table.tablesorter tbody tr td {
  max-width: 250px;
  overflow-x: hidden;
  white-space: wrap;
  text-align:left;
}


#bouton-aide {
  text-align:center;
  margin:0 16px;
	padding:0 8px;
  background-color:#fff0f0;
  border:1px solid #999;
  border-radius:3px;
  cursor:help;
}

#aide {
  background-color:white;
  opacity:0.95;
  position:fixed;
  margin:0 auto;
  padding:5px;
  border:1px solid #999;
  border-radius:4px;
  top:60px;
  left:120px;
  display:none;
  flex-flow:row;
  white-space:wrap;
	width:80vw;
  max-width:800px;
	max-height:85vh;
	overflow-y:scroll;
}

#aide.visible {
	display:flex !important;
}

#aide .col1, #aide .col2 {
  display:flex;
  flex-flow:column;
	width:50px;
  padding:10px;
}

#aide .col1 {
	flex-grow:4;
}

#aide .col2 {
	flex-grow:3;
	border-left:1px solid #ddd;
}

#aide h5 {
  font-size:1.2em;
  margin-top:5px;
}

#aide h6 {
  font-size:1em;
  margin:0;
  margin-top:5px;
}

#aide div ul {
  list-style-type:none;
  padding:5px 15px;
  margin:3px 0;
}

#aide ul li img.bt {
  border:1px solid #999;
  padding:1px;
  border-radius:2px;
}

#aide ul li:before {
  content: "•";
  padding-right: 4px;
  color: #999;
}

#aide p {
  margin:2px 0;
  text-align:justify;
  line-height:130%;
}

.avertissement-adb {
  margin:50px 0 0 50px;
  font-weight:bold;
	color:red;
  z-index:-100;
}

/* @patch 13/09/2023 test taille marqueur */
.size50pc{
	transform:scale(50%);
}


/*************************************************************************
                            MEDIA QUERIES
*************************************************************************/

@media (max-width: 1100px) {
  #titre_carte {
    display: none;
  }
}

/* @GF 29/04/2024 Masquer la liste lorsque la taille de l'écran gêne la lecture de la carte */
@media (max-width: 900px) {
  #phom-liste {
    display:none;
  }
}

@media (max-width: 760px) {
  #dates_maj {
    display: none;
  }
}

/* @GF 23/10/2024 Blend Mode */

.blend-mode-normal .leaflet-layer {
  mix-blend-mode: normal;
}

.blend-mode-multiply .leaflet-layer {
  mix-blend-mode: multiply;
  background-color:white;
}

.blend-mode-overlay .leaflet-layer {
  mix-blend-mode: overlay;
}

.blend-mode-screen .leaflet-layer {
  mix-blend-mode: screen;
}

.blend-mode-difference .leaflet-layer {
  mix-blend-mode: difference;
}

.blend-mode-exclusion .leaflet-layer {
  mix-blend-mode: exclusion;
}

.blend-mode-color-burn .leaflet-layer {
  mix-blend-mode: color-burn;
}

.blend-mode-color-dodge .leaflet-layer {
  mix-blend-mode: color-dodge;
}

.blend-mode-darken .leaflet-layer {
  mix-blend-mode: darken;
}

.blend-mode-lighten .leaflet-layer {
  mix-blend-mode: lighten;
}

.blend-mode-saturation .leaflet-layer {
  mix-blend-mode: saturation;
}

.blend-mode-hue .leaflet-layer {
  mix-blend-mode: hue;
}

.blend-mode-color .leaflet-layer {
  mix-blend-mode: color;
}

.blend-mode-luminosity .leaflet-layer {
  mix-blend-mode: luminosity;
}

.blend-mode-hard-light .leaflet-layer {
  mix-blend-mode: hard-light;
}

.blend-mode-soft-light .leaflet-layer {
  mix-blend-mode: soft-light;
}


/* @GF 28/10/2024 Légende du layer */

div.layer-legend {
  padding:8px;
  background-color: white;
}

h4.layer-legend-title {
  margin:0;
}

img.layer-legend {
  height:50px;
  width:200px;
  object-fit:contain;
}

#coords-popup {
	display:flex;
	flex-direction:column;
	font-size:1em;
	cursor:default;
}

#coords-popup h3 {
	margin-top:0;
	margin-bottom:0.75em;
	font-size:1.25em;
}

#coords-popup p {
	margin:0 0 8px;
	font-size:1em;
}

#coords-popup span {
	position:absolute;
	top:4px;
	right:4px;
	cursor:pointer;
}