/* GENERAL */

@charset "UTF-8";

::after, ::before {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

@font-face {
    font-family: "EuclidFlex";
    src: url("fonts/EuclidFlex-Bold-WebS.woff") format('woff');
}

@font-face {
    font-family: "Open Sans";
    src: url("fonts/OpenSans.woff2") format('woff2');
}

@font-face{
	font-family:'Glyphicons Halflings';
	src:url('fonts/glyphicons-halflings-regular.eot');
	src:url('fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),url('fonts/glyphicons-halflings-regular.woff') format('woff'),url('fonts/glyphicons-halflings-regular.ttf') format('truetype'),url('fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg')
}

.glyphicon-align-justify:before {
    content: "\e055"
}

.lg-view{
    display:inline-block;
}

.sm-view{
    display:none;
}

body {
    font-family: Arial;
    padding:0; 
	margin:0; 
    background-color: white;
    overflow: hidden;
    height:100%;
    width:99%;
	min-width: 320px;
}


.iconeDroite{
	height:21px;
	margin-right:10px;
	margin-top:-2px;
}

.iconeAide{
	height:25px;
}

/* HEADER */ 

header {
	position:relative;
    margin: 0;
    color: #232253;
    background-color: #fff;
	/* background-color:red; */
    height: 50px;
    width: 100%;
	max-width:inherit;
	padding: 0 10px !important;
}

header #configurator-wrap {
    float: right;
    line-height: 30px;
    margin-top: 10px;
}

#configure {
    z-index: 10;
    width: 50px;
    height: 50px;
    overflow: hidden;
    border-width: 0 0 0 1px;
    background-color: transparent;
    position: absolute;
    top: 0;
    right: 0;
    color: #fff;
	visibility: hidden;
	cursor: pointer;

}

#logoAndTitle{
	position:relative;
}

#logoArcep{
	height: 50px;
	/*float: left;*/
	cursor: pointer;	
}

#titre_page{
	position:absolute;
	margin-left:26px;
	font-size: 18px;
	line-height: 50px;
	font-weight: 700;
	font-family: "Open Sans",sans-serif;
	cursor: pointer;
}

#liens{
	position:fixed;
	top: 10px;
	right: 10px;
	line-height: 30px;
}

.liens_arcep{
	display: inline-block;
	max-width: 100%;
	margin-left: 10px;
	margin-bottom: 5px;
	line-height:30px;
	font-weight: 700;
	font-size: 16px;
	text-decoration:none;
	cursor: pointer;
}

#lien_mci{
	color: #337ab7;
}

#lien_mci:hover{
	color: #ee5557;
}

#lien_cf {
	color: #ee5557;
	border-bottom: 2px solid #ee5557;
	vertical-align: inherit;
}

/* MAP */

#map { 
	position:absolute; 
	top:50px; 
	bottom:0; 
	width:100%; 
	/* display:none; */
}

.mapboxgl-ctrl-geocoder{
    min-width: 210px;
}

/* .mapboxgl-ctrl-scale { */
    /* margin-bottom: 0px !important; */
    /* margin-left: 170px !important; */
/* } */

.marker {
    background-image: url('./img/blue-marker.svg');
    background-size: cover;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
}


/* FOND DE CARTE */

#fondDeCarte{
	position: absolute;
	bottom: 25px;
	left: 10px;
	/* height: 20px; */
	/* height: 100px; */
	/* width: 600px; */
	margin-bottom: 10px;
	padding: 5px;
}

#choixStyle {
	/* height: 20px; */
	/* font-size: 11px; */
	/* vertical-align: middle; */
 }
	
#imgFonds{
	height:21px;
	position: relative;
	top: 3px;
	left: 5px;
	margin-right:10px;
}


/* PANNEAU DONNEES */

#encartDonnees {
	position: absolute;
	top: 60px;
	right: calc(1%);
	height: 70px;
	width: 180px;
	/* padding: 20px 20px; */
	background: #232253 ;
	border-radius:5px;
	padding: 5px 10px 5px 15px;
}

#texteEncartDonnees{
    position: absolute;
    /* top: calc(17%);
    left: calc (50%); */
    color: white;
}


.texteCarte{
	font-size:12px;
	text-transform: uppercase;
	line-height:30px;
}

.refDonnees{
	font-size:12px;
	align:right;
}

.selectCSS{
	border: 1px solid #232253;
	padding: 2px;
	border-radius: 5px;
	font-size: 13px;
	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}


/* POPUPS */

.mapboxgl-popup-tip{

}

.mapboxgl-popup-content{
	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
	color : #232253;
	font-size: 12px;
	/* line-height:normal; */
	background: #fff;
	box-shadow : 1px 1px 7px 1px rgba(128,128,128,.2);
	border: 1px solid #fff;
}

.titre_popup {
	color: #e56363;
	/* text-align: center; */
	font-size: 14px;
	text-transform: uppercase;
	/* border-bottom: 1px solid #232253; */
	display: block;
	padding: 5px 10px 5px 10px;
	margin: -10px;
	background-color:#f1ede6;
}

.categorie_popup {
	font-size: 11px;
	font-weight: bold;

}

.texte_lien_popup {
	font-size : 11.5px;
	line-height:1px;
}

.lien_popup, .lien_popup:link, .lien_popup:visited{
	color: #337ab7;
	font-weight: 700;
	text-decoration: none;
}

.lien_popup:hover {
	color: #ee5557;
	text-decoration: underline;
}


/* PANNEAUX : éléments génériques*/

.container {
	display:block;
	position: absolute;
	margin: 0;
    padding: 0;
	background: #fff;
	box-shadow : 1px 1px 7px 1px rgba(128,128,128,.2);
	border: 1px solid #ccc;
	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
	z-index: 10;
	box-sizing: border-box;
}

.containerTitre {
	/* background: #fff; */
	display: inline-flex;
	width:100%;
	padding: 10px 10px 10px 10px;
	font-size: 14px;
	color: #232253;
	text-transform: uppercase;
	box-sizing: border-box;
}

/* ATTRIBUTIONS ET ECHELLE */

.mapboxgl-ctrl-attrib{
    color: #337ab7;
    text-decoration: none;
	font-size: 10px;
	position: relative;
	bottom: -20px;
	left: 100px;
}

.mapboxgl-ctrl-attrib a{
    color: #337ab7;
    text-decoration: none;
	font-size: 10px;
}

.mapboxgl-ctrl-attrib a:hover {
    color: #23527c;
    text-decoration: underline;
}

.mapboxgl-ctrl-scale{
	position : absolute;
	left: 140px;
    bottom: 30px;

}

/* PANNEAU BIENVENUE */

#bienvenue {
    position: absolute;
    z-index: 20;
    top: calc(50% - 150px);
    left: calc(50% - 157px);
    /* height: 300px; */
    width: 330px;
	border-radius:5px;
	padding: 11px;

}

.bienvenueTitre{
	display: flex;
	/* width:100%; */
	background: #337ab7;
	font-size: 15px;
	color: #fff;
	text-align: center;
	justify-content:center;
	text-transform: uppercase;
	padding:10px;
	border-radius:5px 5px 0px 0px;
	margin:-10px -10px 10px -10px;
}

.bienvenueDates{
	color:#337ab7;
	font-size:11px;
	text-align: center;
	justify-content:center;
    float:inherit;
	margin-bottom:10px;
	line-height:20px;
	/* padding: 0px 0px 10px 0px; */
	box-sizing: border-box;
}

.bienvenueTexte{
	height:250px;
	padding: 0px 10px 0px 10px;
    float:left;
    text-align:justify;
	color:#232253;
	font-size:11px;
	/* box-sizing: border-box; */
	overflow-y: auto ;
}

.bienvenueImportant{
	color:#e56363;
}

.bienvenueLien{
	color:#232253;
	font-size:11px;
	text-align: center;
	justify-content:center;
}
/* MODE DE VUE */

#modesDeVue{
	top: 155px;
	right: calc(1%);
	/* height: 300px; */
	width: 300px;	
	z-index:12;
}

.containerOnglets{
	display: flex;
	width:100%;
	/*height:30%;*/
	background: #fff;
	font-size: 13px;
	color: #8d8d9a;
	text-align: center;
	justify-content:center;
	text-transform: uppercase;
	box-sizing: border-box;
	
}

.onglets{
	display: flex;
	width:150px; /* avec vue entreprise : 100px*/
	padding: 10px 10px 10px 10px;
	cursor: pointer;
	background: #fff;
	justify-content:center;
    align-items: center;
	box-sizing: border-box;
}

.onglets:not(:nth-child(3)){ /* prend tout sauf le 3enfant des onglets*/
	border-right: 2px solid #f1ede6;
}

.active {
	background-color: #f1ede6;
	color: #ee5557;

}

.containerContenu{
}

.contenu{
	display: none;
	padding: 30px 10px 10px 10px;
	color:#232253;
	font-size:12px;
	/* align-items: baseline; */
	box-sizing: border-box;
}

.activeContenu {
	background-color: #f1ede6;
    display : block;
}

.checkboxes {
  padding : 0 0 6px 0;
}
.checkboxes label {
  vertical-align: baseline;
}
.checkboxes input {
  vertical-align: text-bottom;
}

/* info vue mode prévisionnel */
#bienvenueProjet {
	margin-top : 10px;
	display:none;
}

.containerSousTitre{
	color:#ffffff;
	background-color:#c9c0b1;
	margin:0px -10px 0px 0px;
	padding: 10px 10px 10px 10px;
}

.projetTexte{
	height:150px;
	margin: 0px -10px 0px 0px;
	padding: 5px 5px 5px 10px;
	background-color:#ffffff;
	color:#8d8d9a;
	font-size:11px;
    text-align:justify;
	/* font-size:11px; */
	/* box-sizing: border-box; */
	overflow-y: auto ;
}


/* liste vue mode zapm */
#ZoneFilterGroup {
	margin-top : 10px;
	/* display:none; */
}


/* #ZoneFilterGroup { */
    /* top: 70px; */
    /* left: 15px; */
    /* width: 0px; */
    /* height: 0px; */
    /* position: relative; */
    /* display: none; */
/* } */



/* input{ */
    /* position:relative; */
    /* vertical-align:middle; */
/* } */
/* label{ */
    /* position:relative; */
    /* display:inline-block; */
    /* vertical-align:middle; */
/* } */


/*PANNEAU INFORMATION*/

#disclaimer {
    position: absolute;
    top: 300px;
	left:10px;
	display:none;
    height: 400px;
    width: 500px;
    z-index: 11;
	overflow:auto;
	text-align:center;
	/* background: #232253 ; */
	border-radius:5px;
	padding: 0 10px 10px 10px;
	overflow:hidden;

}

.disclaimerContenu{
	overflow:scroll;
	height:100%;
	
}

.disclaimerPartie{
	display: flex;
	width:100%;
	background: #f1ede6;
	font-size: 14px;
	color: #ee5557;
	text-align: center;
	justify-content:center;
	text-transform: uppercase;
	padding:10px ;
	margin:0 -10px 20px -10px;
}

.disclaimerTitre{
	color: #ee5557;
	display: flex;
	justify-content: left;
	align-items: center;
	width: 100%;
	font-size:13px;
	text-transform: uppercase;
	border: none;
	padding-left: 10px
}

.separator {
	border-bottom: 1px solid #ee5557 !important;
	height: 2px !important;
	color: #ee5557;
	display: flex;
	justify-content: left;
	align-items: center;
	width: 100%;
	background: 0 0;
	margin-bottom:5px;
}

.disclaimerTexte {
	padding: 0px 10px 20px 10px;
    float:left;
    text-align:justify;
	color:#232253;
	font-size:12px;
	/* align-items: baseline; */
	box-sizing: border-box;
}

.data{	
	width:100%;
	background: #ee9c9c;
	text-align: center;
	padding:10px 0 10px 0;
	}



/* PANNEAU NAVIGATION OUTREMER */

#Outremer {
	display:none;
    z-index: 11;
	position: absolute;
	top: 250px;
	left:10px;
    border-radius: 5px;
}

#Zonelistedom {
	margin: 10px;
}

#menuDeroulantdom{
	width:180px;
}

#dpt{
	width:170px;
}


/* PANNEAU LEGENDES */ 

#blockLegende {
    position: absolute;
    z-index: 13;
	bottom: 70px;
    right: calc(1%);
	border-radius:5px;
	padding: 0px 5px 35px 5px;
}

.legend{
	margin: 0 5px 0px 5px;
	font-size:11px;
	display:none;
}

.legendeTitre{
	font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight:"bold";
	font-size: 12px;
	border-bottom: 1px solid #232253;
	color: #232253
}

.legendeTexte{
	color: #232253;
	text-align:justify;
}

.legendeLigne{
	font-size:11px; 
	margin: 0px 0px 0px 7px
}

.legendeColonne{
	width:50%; 
	margin:0px 0px 0px 0px; 
	float:left;
}

.legendeKeyTaux {
	display:inline-block;
	margin: 1px 5px 0px 0px;
	border: 1px solid #000;
	height: 15px;
	width: 15px;
	border-radius: 5px;
}

.legendeKeyOI {
	display:inline-block;
	margin: 1px 5px 0px 0px;
	border: 2px solid #000;
	height: 15px;
	width: 15px;
	border-radius: 5px;
}

.legendeKeyPrevi {
	display:inline-block;
	margin: 1px 5px 0px 0px;
	border:  1px solid #000;
	border-color: rgba(200,200,200, 0.5);
	height: 15px;
	width: 15px;
	border-radius: 5px;
}



/* .legend div span { */
    /* border-radius: 50%; */
    /* display: inline-block; */
    /* height: 20px; */
    /* margin-right: 5px; */
    /* width: 20px; */
/* } */

.activeLegend{
}

.displayLegend{
	display:block;
}

#Boutonlegend{
	bottom:0px;
	right:0px;
	margin:10px
}


#LegendeCommune {
    /* height: 280px; */
    /* width: 200px; */
}

#LegendeZAPM {
    /* height: 250px; */
    min-width: 220px;
}

#LegendeTaux {
    /* height: 100px; */
    min-width: 220px;
}

#LegendePrevisionnel {
    /* height: 280px; */
    width: 240px;
}
#LegendeReglementaire {
    /* height: 90px; */
    /* width: 250px; */
}


/* VOLETS */


.volets{
	box-shadow : 1px 1px 7px 1px rgba(128,128,128,.2);
	border: 1px solid #ccc;
	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
	font-size:14px;
	z-index: 10;
	box-sizing: border-box;
	background:#fff;
	color:#232253;
	padding:10px;
	text-transform:uppercase;
	border-radius: 5px;
}

.imgVolet {
	height: 21px;
	margin-right: 10px;
	margin-bottom: -5px;
}

#voletdom {
	position: absolute;
	top: 250px;
	left:10px;
}

#voletdisclaimer {
    position: absolute;
    top: 300px;
	left:10px;
}


/* #voletFilterGroup { */
    /* position: absolute; */
    /* left : calc(-3%); */
    /* left : -45px; */
    /* bottom: calc(50%);    */
	/* display:none; */
/* } */

#voletModesDeVue {
    position: absolute;
	top: 155px;
	right: calc(1%);
	display:none;
}

#voletlegend {
    position: absolute;
    /* right: calc(-3%); */
    right :  calc(1%);
    bottom: 70px;
    /* bottom: 10px; */
	display:none;
}

#voletBienvenue{
    position: absolute;
	/*pour possition en dessous de la légende*/
    right: 0px;
    bottom: 10px;
	border-radius: 20px 0px 0px 20px;
 	/* pour position au dessus des attributions*/
/* 	left : 0px;
	bottom: 50px; 
	border-radius:0px 20px 20px 0; */
; 

	padding: 10px;
    background: #337ab7;
    color: #fff;
	cursor: pointer;
	display:none;
}

/* GESTION BOUTONS */

/* #ZonebouttonFilterGroup { */
    /* font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif; */
    /* padding: 5px; */
    /* position: absolute; */
    /* z-index: 5; */
    /* top: 0%; */
    /* right: 0%; */
    /* height: 10px; */
    /* width: 150px; */
    /* color:#black; */
    /* background: rgba(255, 255, 255, 0); */
    /* border-radius: 10px; */
    /* box-shadow: 0 6px 10px rgba(0,0,0,0); */
/* } */



.popupBoutonFermer {
	position: absolute;
	height: 20px;
	width: 20px;
	text-align: center;
	cursor: pointer;
	color: #fff;
	border-radius: 5px;
	background: #c9c0b1;
	font-size: 12px;
	font-weight: bold;
	display: inline-block;
	line-height: 20px;
}

.gauche {
    top: 0px;
    right: 0px;
	margin: 10px;
}

.droite {
    top: 0px;
    left: 0px;
	margin: 10px;
}

@media screen and (max-height: 670px) {
	.activeContenu{
		max-height:300px;
		overflow-y: auto ;
	}
	
	
	#disclaimer{
		height:240px
	}
}



@media screen and (max-width: 1040px) {

    .lg-view{
        display:none;
    }

    .sm-view{
        display:inline-block;
    }

    .mapboxgl-ctrl-geocoder {
        min-width: 210px !important;
    }

   
    #logoMapbox {
        bottom: 0px;
        left: 30px;
    }

    /* .mapboxgl-ctrl-scale { */
        /* margin-bottom: 0px !important; */
        /* margin-left: 120px !important; */
    /* } */

    #encartDonnees{
        /* top: 55px; */
        height: 30px;
        /* width: 150px; */
		background-color:#232253;
        /* display: block; */
		text-align:right;
		padding: 5px 0px 5px 15px;

    }
	
	.texteCarte{
		font-size:12px;
		padding-right:4px;
	}

    #choixTrimestre {
        height: 20px;
        font-size: 11px;
        /* vertical-align: middle; */

    }

    .mapboxgl-ctrl-attrib.mapboxgl-compact::after{
        left: 0px !important;
    }
    .mapboxgl-ctrl-attrib.mapboxgl-compact {
        margin: 0 10px 0 0 !important;
        padding-left: 24px !important;
        padding-right: 4px !important;
    }

	/* .liens_arcep{ */
		/* font-size:.7em; */
	/* } */	
	
	#liens{
		position:static;
		display:none;
		background-color:#FFFFFF;
	}

	#configure {
        z-index: 10;
        width: 50px;
        height: 50px;
        overflow: hidden;
		margin-right: 10px;
		padding: 0px;
        border-width: 0 0 0 1px;
        background-color: transparent;
        position: absolute;
        top: -2px;
        right: 0;
        color: #000000;
		font-family:'Glyphicons Halflings';
		visibility: visible;
		font-size:16px !important;
    }
	#configurator-wrap {
        position: absolute;
        overflow: hidden;
        height: 80px;
        right: 0;
        top: 50px;
        z-index: 1000;
        padding: 0;
        width: 320px;
		display:none;
    }
	
	.liens_arcep{
	font-size:1em;
	}

}


@media screen and (max-width: 420px) {
		
    .lg2-view{
        display:none;
    }

	#encartDonnees{
		background-color:transparent;
    }
	
	.texteCarte{
		color:transparent;
	}
	
	#logoArcep {
		height: 30px;
		margin-top: 10px;
    }

	#titre_page{
		font-size: .81em;
	}
	
	#disclaimer{
		height:250px;
		width:250px;
	}
	
	#bienvenue{
		width:270;
	}
	
	#voletModesDeVue{
		top:110px;
		transform-origin: right bottom;
		-webkit-transform: rotate(270deg);
		-moz-transform: rotate(270deg);
		-o-transform: rotate(270deg);
		-ms-transform: rotate(270deg);
	}

	#voletlegend{
		bottom:160px;
		transform-origin: right bottom;
		-webkit-transform: rotate(270deg);
		-moz-transform: rotate(270deg);
		-o-transform: rotate(270deg);
		-ms-transform: rotate(270deg);
	}	

}