#mapid{
    height:180px ;
    height: 600px; 
}


.leaflet-control-layers-list{
	text-align: left;
}

.section-bouton {
	display: flex;
	max-width: 90%;
	flex-direction: row;
	justify-content: space-around;

}

.bouton{
 padding: 20px;
 background-color:lightgoldenrodyellow;
 cursor: pointer;
}

.bouton:hover{
	background-color:gray;
}


#rotating { 
   
    -webkit-transition: all 5s ease-in-out ;
    -moz-transition: all 5s ease-in-out ;
    -o-transition: all 5s ease-in-out ;
    transition: all 5s ease-in-out ;
}

.rotated { 
    transform:rotate(360deg); 
    -webkit-transform:rotate(360deg); 
    -moz-transform:rotate(360deg); 
    -o-transform:rotate(360deg); 
}




#map {
	width: 800px; 
	height: 600px; 
	border: 1px solid #ccc;
}

#progress {
    display: none;
    position: absolute;
    z-index: 1000;
    left: 400px;
    top: 300px;
    width: 200px;
    height: 20px;
    margin-top: -20px;
    margin-left: -100px;
    background-color: #fff;
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 4px;
    padding: 2px;
}

#progress-bar {
    width: 0;
    height: 100%;
    background-color: #76A6FC;
    border-radius: 4px;
}


body{
    background-color: lightslategray;
    text-align: center;
    padding: auto,auto;

    
}

.Titre{
   margin: 20px, 10px; 
}





.marker-cluster-small {
	background-color: lightblue;
	}
.marker-cluster-small div {
	background-color: lightgray;
	}

.marker-cluster-moyen {
	background-color: tomato;
	}
.marker-cluster-mouen div {
	background-color: lightsalmon;
	}

.marker-cluster-grand {
	background-color: chartreuse;
	}
.marker-cluster-grand div {
	background-color:lightgreen;
	}


.marker-cluster {
	background-clip: padding-box;
	border-radius: 20px;
	}
.marker-cluster div {
	width: 30px;
	height: 30px;
	margin-left: 5px;
	margin-top: 5px;

	text-align: center;
	border-radius: 15px;
	font: 12px "Helvetica Neue", Arial, Helvetica, sans-serif;
	}
.marker-cluster span {
	line-height: 30px;
	}