/*FULL*/
/*
couleurs :
vert claire = #84B833
vert foncé = #17938D
violet = #A82A63
bleu claire = #31BAF3
pourpre = #cf1ae2
orange = #ff9900
gris = #828282

*/
.filtreswipe {
    height: 40px;
    overflow-x: auto;
    overflow-y: hidden;
    text-align: center;

}
#espace_filtres {

    display: block ruby;

}
.filtreswipe .filtre{
	border:0;
	text-transform: uppercase;
	font-size: 12px;
	padding: 3px 10px;
	margin-right: 15px;
	cursor: pointer;
}
.filtreswipe .filtre:hover{
	color: #000;
}
.filtreswipe .filtre.on{
	border-bottom: 2px solid #000;
}
.filtreswipe .filtre.off{
	border-bottom: 2px solid transparent;
}
.contenaire{
display: flex;
height:calc(100vh - 40px);
box-shadow: 0px 0px 10px #6A6A6AAB;
border-radius: 20px;

}
.contenaire .map{
height:calc(100vh - 40px);
width:70%;
-webkit-transition: all .2s linear 0s;
transition: all .2s linear 0s;	
border-radius: 0 20px 20px 0;    		
}
.contenaire .sidebar{
width: 30%;
-webkit-transition: all .2s linear 0s;
transition: all .2s linear 0s;	  
background-color: #FFF;/*#F9F9F9;*/
border-radius: 20px 0 0 20px;
		
}
.contenaire.active .sidebar{
width: 0;	 

}
.contenaire.active .map{
width: 100%;
border-radius: 20px 20px 20px 20px;
}
.heading{
height:40px;
display: flex;
justify-content:space-between;
}
.footing {
    position: relative;
    height: 20px;
    background-color: transparent;
}
.heading h2{
font-size: 1rem;
margin: 0;
padding: 10px 20px
}

.cat .filtre {
    padding: 10px 20px;
    text-transform: uppercase;
    position: relative;
    cursor: pointer;
}
.cat .filtre.vert-clair,.vert-clair .item a:hover i,.vert-clair .item:hover .title {
	color: #85B933;
}
.cat .filtre.bleu-clair,.bleu-clair .item a:hover i,.bleu-clair .item:hover .title {
	color: #3CB6EA;
}
.cat .filtre.vert-fonce,.vert-fonce .item a:hover i,.vert-fonce .item:hover .title {
	color: #17938D;
}

.cat .filtre.violet,.violet .item a:hover i,.violet .item:hover .title{
	color: #A82A63;
}

.cat .filtre.pourpre,.pourpre .item a:hover i,.pourpre .item:hover .title{
    color: #cf1ae2;
}
.cat .filtre.orange,.orange .item a:hover i,.orange .item:hover .title{
    color: #ff9900;
}
.cat .filtre.gris,.gris .item a:hover i,.gris .item:hover .title{
    color: #828282;
}

.item a{color:#575756;}

.leaflet-popup.bleu-clair .leaflet-popup-content-wrapper{
	background-color:#3CB6EA; 
}
.leaflet-popup.vert-clair .leaflet-popup-content-wrapper{
	background-color:#85B933; 
}
.leaflet-popup.vert-fonce .leaflet-popup-content-wrapper{
	background-color:#17938D; 
}
.leaflet-popup.violet .leaflet-popup-content-wrapper{
    background-color:#A82A63; 
}
.leaflet-popup.pourpre .leaflet-popup-content-wrapper{
    background-color:#cf1ae2; 
}
.leaflet-popup.orange .leaflet-popup-content-wrapper{
    background-color:#ff9900; 
}
.leaflet-popup.gris .leaflet-popup-content-wrapper{
    background-color:#828282; 
}

.leaflet-popup .leaflet-popup-tip{
	background-color: transparent;
	box-shadow: none;
}
.leaflet-container a.leaflet-popup-close-button {
    position: absolute;
    top: 6px;
    right: 6px;
    padding: 4px;
    border: none;
    text-align: center;
    width: 21px;
    height: 21px;
    font: 16px/14px Tahoma, Verdana, sans-serif;
    color: #c3c3c3;
    text-decoration: none;
    font-weight: bold;
    background: #fff;
    border-radius: 30px;
}

.leaflet-container .bleu-clair a.leaflet-popup-close-button{
color: #3CB6EA;
}
.leaflet-container .vert-clair a.leaflet-popup-close-button{
color: #85B933;
}
.leaflet-container .vert-fonce a.leaflet-popup-close-button{
color: #17938D;
}
.leaflet-container .violet a.leaflet-popup-close-button{
color: #A82A63;
}
.leaflet-container .pourpre a.leaflet-popup-close-button{
color: #cf1ae2;
}
.leaflet-container .orange a.leaflet-popup-close-button{
color: #ff9900;
}
.leaflet-container .gris a.leaflet-popup-close-button{
color: #828282;
}



.leaflet-popup-content{
	margin: 0 0 19px 0;
}
.leaflet-popup-content img{
	border-radius: 12px 12px 0 0;
}
.leaflet-popup-content h5{
	margin : 5px 19px 15px 19px;
	color: #fff;
	font-size: 0.9rem;
	text-transform: uppercase;
}
.leaflet-popup-content p {
    margin: 7px 19px;
    color: #fff;
	font-size: 0.6rem;
	text-transform: uppercase;
}
.leaflet-popup-content a {
    padding: 5px 10px;
    background-color: #FFF;
    border-radius: 30px;
    font-size: 0.6rem;
    text-transform: uppercase;
    font-weight: bold;
    margin: 10px 19px;
}
.leaflet-popup-tip-container {
    width: 40px;
    height: 20px;
    position: absolute;
    left: -7px;
    margin-left: -20px;
    overflow: hidden;
    pointer-events: none;
    top: 50%;
}
.leaflet-popup-tip{
 display : inline-block;
 height : 0;
 width : 0;
 border-top : 9px solid transparent;
 border-right : 16px solid #3CB6EA;
 border-bottom : 9px solid transparent;
 -webkit-transform: rotate(0deg); 
 -moz-transform: rotate(0deg);
 -ms-transform: rotate(0deg);
 transform: rotate(0deg);
 padding: 0;
 margin: 0;
 background-color: transparent;
}
.vert-clair .leaflet-popup-tip{
	 border-right : 16px solid #85B933;
}
.bleu-clair .leaflet-popup-tip{
	 border-right : 16px solid #3CB6EA;
}
.vert-fonce .leaflet-popup-tip{
	 border-right : 16px solid #17938D;
}
.violet .leaflet-popup-tip{
     border-right : 16px solid #A82A63;
}
.pourpre .leaflet-popup-tip{
     border-right : 16px solid #cf1ae2;
}
.orange .leaflet-popup-tip{
     border-right : 16px solid #ff9900;
}
.gris .leaflet-popup-tip{
     border-right : 16px solid #828282;
}
.cat .filtre:after{
	right: 20px;
	content:url("../js/marker/marker-Etablissement.png");
	content: '';
	position: absolute;
	display:inline-block;
   width:30px;
   height:30px; 
}
.cat .filtre.on.vert-clair:after{
   background:url(../js/marker/bt-vert-clair-on.png) no-repeat;
    background-size:100%;
}
.cat .filtre.vert-clair.off:after{
   background:url(../js/marker/bt-vert-clair-off.png) no-repeat;
    background-size:100%;
}

.cat .filtre.on.bleu-clair:after{
   background:url(../js/marker/bt-bleu-clair-on.png) no-repeat;
    background-size:100%;
}
.cat .filtre.bleu-clair.off:after{
   background:url(../js/marker/bt-bleu-clair-off.png) no-repeat;
    background-size:100%;
}

.cat .filtre.on.vert-fonce:after{
   background:url(../js/marker/bt-vert-fonce-on.png) no-repeat;
    background-size:100%;
}
.cat .filtre.vert-fonce:after{
   background:url(../js/marker/bt-vert-fonce-off.png) no-repeat;
    background-size:100%;
}

.cat .filtre.on.violet:after{
   background:url(../js/marker/bt-violet-on.png) no-repeat;
    background-size:100%;
}
.cat .filtre.violet:after{
   background:url(../js/marker/bt-violet-off.png) no-repeat;
    background-size:100%;
}


.cat .filtre.on.orange:after{
   background:url(../js/marker/bt-orange-on.png) no-repeat;
    background-size:100%;
}
.cat .filtre.orange:after{
   background:url(../js/marker/bt-orange-off.png) no-repeat;
    background-size:100%;
}


.cat .filtre.on.pourpre:after{
   background:url(../js/marker/bt-pourpre-on.png) no-repeat;
    background-size:100%;
}
.cat .filtre.pourpre:after{
   background:url(../js/marker/bt-pourpre-off.png) no-repeat;
    background-size:100%;
}


.cat .filtre.on.gris:after{
   background:url(../js/marker/bt-gris-on.png) no-repeat;
    background-size:100%;
}
.cat .filtre.gris:after{
   background:url(../js/marker/bt-gris-off.png) no-repeat;
    background-size:100%;
}




.listings{
height: calc(100% - 60px);
overflow: auto; 
}
.leaflet-left {
    left: 10px;
}
.leaflet-top {
    top: 10px;
}
.btPano {
    background-color: #FFF;
    margin: 0;
    padding: 7px 12px 1px 12px;
    border-radius: 180px;
}
.btPano.off {

    padding: 12px 12px 6px 12px;

}
.btPano svg{
	width: 18px;
	fill:#3CB6EA;
}
.btPano .close{
	display:block;
}
.btPano.off .close{
	display:none;
}
.btPano .burger{
	display:none;
}
.btPano.off .burger{
	display:block;
}
.btPano:hover .burger,.btPano:hover .close{
	color: #000;
}
.item{
	padding: 20px 0 20px 20px;
	cursor: pointer;
	background-color: #FAFAFA;
	border-top:1px solid #F5F5F5;
	display: flex;
	align-items: center;
	justify-content: start;/*space-between;*/
}  
.item i{
	color: #BBB;
	margin-right: 10px;
}
.item.off{display: none;}
.item:hover{
	background-color: #F5F5F5;
} 	
.item .titre{
	font-size: 0.9rem;
    width: 250px;
}
.item .ville{
	font-size: 0.7rem;
	text-transform: uppercase;
}

.leaflet-top, .leaflet-bottom {

    pointer-events: auto;
    cursor: pointer;

}

@media screen and (max-width: 500px){
	.contenaire .sidebar{
		width: 80%;
	}
	.contenaire .map{
		width:20%;
	}
}