/* CSS Document */

.table-cell {
	display:table-cell;
	vertical-align:middle;
	padding:0 5px;
	width:auto;
}

/* MODULE DE RECHERCHE */

#page-recherche-arbre .bloc-grille.two-up {
	margin-top:20px;
}
#page-recherche-arbre .bloc-grille.two-up > li { padding: 0 16px 20px!important; }


/* ADMIN */
.error { background:#FF0004; color:#fff; display:block; padding:2px 5px; font-size:12px!important; }


/* Outils dynamique */
#illustration-dynamique {
	position:relative;
	padding-bottom:73%;
	height:0;
	/*overflow:hidden;*/
	margin-bottom:7px;
	margin-top:10px;
}

#illustration-dynamique > div:first-child,
#illustration-dynamique .dist-fond {
	background:url(../images/outils-pylone.png) no-repeat left bottom;
	background-size:auto 98%;

	position:absolute;
	top:0;
	left:0;
	width:100%!important;
	height:100%!important;
}
.ie8 #illustration-dynamique .dist-fond {
	background:url(../images/outils-pylone-ie8.png) no-repeat left bottom;
}

#illustration-dynamique .inner {
	position:relative;
}

#illustration-dynamique .dist-terrain {
	background:#b3b3b3;
	height:10px;
	width:100%;
	position:absolute;
	right:0;
	bottom:0;
}

#illustration-dynamique .dist-repere {
	display:block;
	border-right:2px dotted #fff;
	height:27%;
	position:absolute;
	bottom:0px;
	left:11.5%;
	width:2px;
	z-index:1000;
}

#illustration-dynamique .dist-distance {
	background:#0e5e87;
	height:10px;
	width:0%;
	position:absolute;
	left:11.5%;
	bottom:0;
}


#illustration-dynamique .icone-creuser {
	background:url(../images/outils-pelle.png) no-repeat left top;
	background-size:contain;
	display:block;
	width:11%;
	height:25%;
	position:absolute;
	bottom:10px;
	right:-6%;
	z-index:1000;
}

.ie8 #illustration-dynamique .icone-creuser {
	background:url(../images/outils-pelle-ie8.png) no-repeat left top;
	width:25px;
	height:63px;
}

#illustration-dynamique .dist-message {
	/*background:#ccc;*/
	color:#05527c;
	position:absolute;
	font-family: 'Open Sans', sans-serif;
	font-weight:600;
	font-size:48px;
	font-size:4.8rem;
	font-size:4vmin;
	padding-left:0.5em;
	text-align:center;
	top:20%;
	width:100%;
}

#illustration-dynamique .dist-message.aucune-restriction {
	font-size:34px;
	font-size:3.4rem;
	font-size:3vmin;
	line-height:1.2em;
}

#distance-plantation {
	width: 100%;
	display: block;
	height: auto;
	position: relative;
	padding-top: 73.7704%;
	margin-bottom:6px;
	margin-top:10px;
}
	#distance-plantation svg {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}

	#distance-plantation .dist-message {
	/*background:#ccc;*/
	color:#05527c;
	position:absolute;
	font-family: 'Open Sans', sans-serif;
	font-weight:600;
	font-size:48px;
	/*font-size:4.8rem;
	font-size:4vmin;*/
	padding-left:0.5em;
	text-align:center;
	top:25%;
	width:100%;
	}

	#distance-plantation .dist-message.aucune-restriction {
		font-size:34px;
		/*font-size:3.4rem;
		font-size:3vmin;*/
		line-height:1.2em;
	}
@media only screen and (max-width:860px) {
	#illustration-dynamique .dist-message {
		font-size:6vw;
	}
	#illustration-dynamique .dist-message.aucune-restriction {
		font-size:4vw;
	}
}

@media only screen and (max-width:480px) {
	#illustration-dynamique .dist-message {
		font-size:14vw;
	}
	#illustration-dynamique .dist-message.aucune-restriction {
		font-size:10vw;
	}
}

/* Carte élagage */

.bloc-googlemap {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}
.bloc-googlemap.ratio-1-1 {
    padding-bottom: 100%}
.bloc-googlemap.ratio-anamorphique {
    padding-bottom: 23.9%}
.bloc-googlemap.ratio-4-3 {
    padding-bottom: 75%}
.bloc-googlemap.ratio-16-9 {
    padding-bottom: 56.25%}
.bloc-googlemap.ratio-16-10 {
    padding-bottom: 62.5%}
.bloc-googlemap.ratio-21-9 {
    padding-bottom: 43%}
.bloc-googlemap>div:first-child {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%!important;
    height: 100%!important;
}
.canvas_map {
    width: 100%!important;
}
.gm-infowindow {
    padding: 10px 0 0 0;
    line-height: 1.35;
    overflow: hidden;
}
.widget-zoom-button.widget-zoom-in {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    background-size: contain;
    background: #fff url(/images2014/gm-zoom-in.png) no-repeat center center;
}
.md_svg .widget-zoom-button.widget-zoom-in {
    background: #fff url(/images2014/gm-zoom-in.svg) no-repeat center center;
}
.widget-zoom-button.widget-zoom-out {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    background-size: contain;
    background: #fff url(/images2014/gm-zoom-out.png) no-repeat center center;
}
.md_svg .widget-zoom-button.widget-zoom-out {
    background: #fff url(/images2014/gm-zoom-out.svg) no-repeat center center;
}
.widget-zoom-icon {
    display: block;
    text-indent: -9999px;
}
.widget-zoom-button {
    background-color: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
    cursor: pointer;
    display: block;
    height: 30px;
    overflow: hidden;
    position: relative;
    width: 30px;
}
.widget-zoom-button:hover {
    background-color: #ededed;
}
#widgets-holder {
    display: inline-block;
    position: absolute;
    bottom: 50px;
    right: 20px;
}

.travaux-annees-mobile > div { display:none }
#map-elagage {  z-index:1; }
#map-box { position:relative; }

#map-overlay{ background:rgba(0,0,0,0.5); position:absolute; z-index:500; width:100%; height:100%; }

#elagage-aside { display:none; background:rgba(255,255,255,0.9); box-shadow:0px 0px 5px rgba(0,0,0,0.6); -webkit-box-shadow:0px 0px 10px rgba(0,0,0,0.7);  position:absolute; right:10px; /*text-align:center;*/ top:10px; width:25%; z-index:800; }
	#elagage-aside .inner-content { padding:20px 10px;}

	#elagage-message { font-size:0.92em; line-height:1.3em;	 margin:10px 0 20px 0; text-align:left; }

	#btn-reverifier { margin-top:15px;}
		#btn-reverifier a { background:#3f629c!important; box-shadow:0px 0px 5px rgba(0,0,0,0.6); -webkit-box-shadow:0px 0px 5px rgba(0,0,0,0.6); color:#fff; display:inline-block; padding:5px 10px; text-decoration:none; text-align:center }

#module-elagage button { background:#3f629c; box-shadow:0px 0px 5px rgba(0,0,0,0.6); -webkit-box-shadow:0px 0px 5px rgba(0,0,0,0.6); border:none; color:#fff; cursor:pointer; display:inline-block; font-weight:bold; padding:9px 15px; text-decoration:none; }
	#module-elagage button:hover, #btn-reverifier a:hover  { background:#003366; box-shadow:none; }

#elagage-recherche {background:rgb(255,255,255); box-shadow:0px 0px 10px rgba(0,0,0,0.7); -webkit-box-shadow:0px 0px 10px rgba(0,0,0,0.7); /*display:none;*/  position:absolute; top:25%; left:20%; width:60%; z-index:1000; }
	#elagage-recherche #inner-content { background:#fff; padding:20px;}
	#elagage-recherche.erreur-serveur { border:4px solid #F00; }
	#elagage-recherche fieldset { margin-bottom:20px;}
	#elagage-recherche legend { font-weight:bold; margin:0 0 10px 0; white-space:normal; display:none; }
	#elagage-recherche ul { display:table; list-style:none;  margin:0; width:100%; }
		#elagage-recherche li { display:table-row; width:100%;  }
		#elagage-recherche li span {font-weight: 700; text-decoration: underline;}
		#elagage-recherche li .label span {font-weight: 300; text-decoration: underline;}
			#elagage-recherche .label { vertical-align:middle; padding:10px 0 5px 0; }
			#elagage-recherche .input { padding: 0 0 10px 0}
			#elagage-recherche .input #code-postal {width: 40%; margin-bottom: 10px;}
				#elagage-recherche input { background:#eef4fa; border:1px solid #cfdff1; padding:2%; width:94%; }
				#elagage-recherche .numero-immeuble input { background:#eef4fa; border:1px solid #cfdff1; padding:2%; width:35%; }
				#elagage-recherche input:focus { background:#fff; }
				#elagage-recherche input.error { background:#fffc00; border:1px solid #F00; color:#000;}
				#elagage-recherche .error-msg { display:block; font-size:0.92em; color:#F00; }
				#elagage-recherche .border-left {border-left: 1px solid black;}



#modal-message { background:#fff; padding:20px; position:absolute; top:50%; left:50%; z-index:1000;}

.legende-carte {
	display: block;
	padding: 20px 22px !important;
	border: 1px solid #d8d9da;
}

.liste-legende {
	position: relative;
	list-style: none;
}

.liste-legende li {
	position: relative;
	list-style: none;
	padding-left: 40px;
	padding-bottom: 5px;
	display: inline;
	padding-right:50px	
}

.liste-legende li:before {
	content: '';
	position: absolute;
	left: 0;
	display: block;
	width: 30px;
	top: 6px!important;
	height: 10px;
	background-color: #d8d9da;
}

.text-right {
	text-align: right;
}

.liste-legende li.layer_00001:before {
	background-color: #ffa100;
}

.liste-legende li.layer_00002:before {
	background-color: #000080;
}

.liste-legende li.layer_00003:before {
	background-color: #000080;
	border-top: 3px #ffa100 solid;
	border-bottom: 3px #ffa100 solid;
}


/* Carrousel */
.marche-a-suivre .figcaption {
	color:#50575d!important;
	font-size:1.2rem!important;
}

#bloc-jardin-botanique p, #bloc-jardin-botanique figure	 { margin:0; }
#bloc-jardin-botanique {
	border:1px solid #D8D9DA; padding:20px;
}



@media only screen and (max-width: 600px) {
	#elagage-recherche { top:5%; left:5%; width:90%; z-index:1000; /*display:none;*/ }
	#elagage-recherche #inner-content { padding:10px 0;}
	#elagage-recherche .label { display:block; width:100%; padding:5px 0 0 0; }
	#elagage-recherche .input { display:block; width:100%; padding:0}

	#elagage-aside { display:none!important; background:#fff; box-shadow:none; -webkit-box-shadow:none; position:relative; right:auto; top:auto; width:auto; z-index:800; }
}

@media print {
	.lien-fiche a:after { display:none!important; }
	#l-bloc-noms { margin-top:50px; }
	#QR-code { display:block!important; }
	#hq-main div[class^="hq-collapse"] 	li { page-break-inside:auto; }
}

@media screen and (max-width: 768px) {
	.liste-legende li {
		display: block;
		margin: 10px 0;
	}
	#elagage-recherche, #elagage-recherche label {
		font-size: 1.4rem!important;	
	}
	#elagage-recherche p {
		margin-bottom: 0px!important;
		text-align: center;
		padding: 0px 5px;
	}
}
#elagage-recherche sup {
	color:red;
	font-size: 20px;
}
#elagage-recherche .required {
	display: inline-block;
    position: relative;
    padding-right: 15px;
    width: auto;
}
#elagage-recherche .required::after {
	color: #c83200;
    background: url(/images2014/form-icn-requis.png) no-repeat 0 0;
    content: " ";
    display: block;
    height: 9px;
    right: 0px;
    top: -2px;
    position: absolute;
    width: 11px;
}


/* Nouvelle carte elagage */
.padding-fix {
	padding-top: 0px !important;
}


#hq-carte {
	padding: 0;
	margin: 0;
	height: 800px;
	width: 100%;
}

#widget-container{
	display: flex;
	margin-bottom: 40px;
}

#searchWidget{
	width: auto;
	padding: 20px;

	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
}

#legendWidget h2{
	border-bottom: 1px solid rgba(110,110,110,.3);
}

#legendWidget h2 a{
	/* color: #000; */
	display: flex;
	padding: 12px 15px;
}

#legendWidget h2 a::after{
	background-image: url(/images2016/icn-collapse.png);
	background-position: 0 -42px;
	content: " ";
	display: block;
	width: 14px;
	height: 14px;
	position: absolute;
	right: 15px;
	top: 15px;
}

#legendWidget h2 a.closed::after{
	background-position: 0 0;
}

#maj-container{
	display: flex;
	justify-content: flex-end;
	align-items: flex-end;
	height: auto;
	padding: 20px;
}

.esri-search__container{
	flex: unset;
	border-top: 1px solid rgb(0,0,0,0.1);
	box-shadow: 0 1px 2px rgb(0 0 0 / 50%);
	width: 100%;
}

#esri-search-label{
	margin-bottom: 15px;
	font-size: 1.8rem;
}

.esri-legend svg{
	width: unset;
	height: unset;
}
#legendWidget > div{
	padding-top: 15px;
}

.esri-legend__service.esri-legend__group-layer, #legendWidget > div{
	overflow-y: hidden;
	max-height: 280px; /* approximate max height */

	transition-property: all;
	transition-duration: .5s;
}

.esri-legend__service.esri-legend__group-layer.closed, #legendWidget > div.closed{
	max-height: 0px;
	padding-top: 0;
	padding-bottom: 0;
}


#widget-container, #hq-carte,.esri-widget__heading.esri-legend__service-label, .esri-legend__layer-caption{
	display: none;
}

#map-loading{
	width: 64px;
	margin: 0 auto;
	display: block;
}

.is-loaded #map-loading{
	display: none;
}

.is-loaded #widget-container, .is-loaded #hq-carte{
	display: flex;
}

.esri-legend__service.esri-legend__group-layer-child, .esri-legend__service{
	padding:0;
	border-bottom: none;
	margin-left: 0;
}

.esri-legend__layer-cell--info{
	font-size: 1.4rem;
	padding-left: 15px;
}

#legendWidget{
	opacity: 0;
}

.esri-legend__symbol img{
	width: 50px !important;
}

@media only screen and (max-width : 767px){
	#widget-container{
		flex-direction: column-reverse;
	}

	#maj-container{
		justify-content: flex-start;
		margin-left: 20px;
	}
}
