kiss/plugin/clientmap/css/main.css

/** CLIENTMAP **/
/* Conteneur principal du plugin Carte des Clients */
.plugin-clientmap{
	list-style-type: none;
	margin:0;
	padding:0;
}

.plugin-clientmap #clientmaps {}

/* formulaire d'édition de client */
.plugin-clientmap .client-form {}


.module-clientmap{
	overflow: hidden;
}
.module-clientmap,.module-clientmap body{
	height: 100%;
}

.module-clientmap body > .container-fluid{
	padding-top: 51px;
	padding-left: 0px;
	padding-right: 0px;
	height: 100%;
}
.client-map-no-points{
	position: absolute;
	top: calc(50% - 60px);
	left: 50%;
}

.module-clientmap.embedded .plugin-clientmap .map-panel{
	width: 35%;
	padding: 0 10px 0 0;
}

.module-clientmap.embedded .module-clientmap .map-panel-box {
	margin-top: 0;
	padding-top: 0;
}

.module-clientmap.embedded .plugin-clientmap .map-container{
    margin-left: 35%;
}

.module-clientmap.embedded #mainMenu,
.module-client.embedded .footer{
	display: none;
}
.module-clientmap.embedded .container-fluid{
	padding-top: 0px;
}

.module-clientmap.embedded .map-panel{
	margin-top: 0px;
}

.module-clientmap.embedded body {
    margin-bottom: 0px;
}

.module-clientmap .client-job{
	max-height: 20px;
	font-size: 11px;
	display: block;
	white-space: nowrap;
    text-overflow: ellipsis;
	overflow: hidden;
}

.plugin-clientmap{
	height: 100%;
	position: relative;
}

#client-map{
	height: 800px;
}

.plugin-clientmap .map-panel{
	height: 100%;
	position: fixed;
	left: 0;
	z-index: 1000;
	top:0;
	width:22%;
	margin-top: 50px;
	background-color: #ffffff;
}

.plugin-clientmap .map-container{
	margin-left: 22%;
	height:100%;
}

.plugin-clientmap .map-panel .advanced-search-box{
	padding: 0;
}

.plugin-clientmap .map-panel .advanced-search-box li.condition > .filter-option{
	font-size: 11px;
}

.plugin-clientmap .map-panel .advanced-search-box .filter-operator,
.plugin-clientmap .map-panel .advanced-search-box .filter-value {
    width: 100%;
    font-size: 11px;
}
.plugin-clientmap .map-panel .advanced-search-box .filter-operator {
	height: 24px;
}
.plugin-clientmap .map-panel .advanced-search-box .filter-column {
	height: 25px;
}

.plugin-clientmap .map-panel .advanced-search-box .filter-operator > select{
	    padding-left: 0;
}
.plugin-clientmap .map-panel .advanced-search-box .filter-column > select{
	font-size: 16px;
	max-width: 150px;
	height: 25px;
	padding: 0;
}

.plugin-clientmap .map-panel .advanced-search-box .filter-operator select{
	color: #9a9a9a!important;
}

.plugin-clientmap .map-panel .advanced-search-box .condition{
	padding-top: 0;
}

.plugin-clientmap .map-panel .advanced-search-box .filter-join{
	font-weight: 100;
    color: #828282;
    font-size: 10px;
    border: 0;
}

.plugin-clientmap .map-panel #clients{
	list-style-type: none;
	padding:0;
	margin:0;
}
.plugin-clientmap .map-panel #clients li .external-link:hover{
	color: #007bff;
}
.plugin-clientmap .map-panel #clients li .external-link{
    position: absolute;
    bottom: 10px;
    right: 10px;
}
.plugin-clientmap .map-panel #clients li{
	position: relative;
	padding:15px;
	border-bottom:1px solid #eeeded;
	cursor: pointer;
	transition: background 0.2s ease-in-out;
}

.plugin-clientmap .map-panel #clients li .client-details{
	display: none;
}
.plugin-clientmap .map-panel #clients li.selected .client-details{
	display: block;
}

.plugin-clientmap .map-panel #clients li.selected .external-link{
	right: 15px;

}

.map-panel .pagination{
	width: 100%;

}

.plugin-clientmap .map-panel #clients li.selected .map-client-avatar{
	display: block;
	float: none;
	width:100px;
	height:100px;
	margin:10px auto!important;
	text-align: center;
}

.plugin-clientmap .map-panel #clients li:hover{
	background-color: #f8f8f8;
}

.plugin-clientmap .client-list-container{
	/*height: calc(100% - 240px);*/
	min-height: 400px;
	color:#565a5c;
	/*overflow-y: auto;*/
}
.plugin-clientmap .client-list-container a{
	color:#565a5c;
}

.plugin-clientmap .text-icon{
	width:25px;
	text-align: center;
	color:#1a73e8;
}

.plugin-clientmap .client-list-container .map-client-label{
	height: 70px;
	font-size: 14px;
	white-space: nowrap;
	text-overflow: ellipsis;
	display: block;
	overflow: hidden;
}


.module-clientmap .map-panel-box{
	overflow-y: auto;
	height: calc(100% - 60px)!important;
}



.plugin-clientmap .client-list-container::-webkit-scrollbar,.module-clientmap .map-panel-box::-webkit-scrollbar {
	width: 6px;
	height: 6px;
}
.plugin-clientmap .client-list-container::-webkit-scrollbar-button,.module-clientmap .map-panel-box::-webkit-scrollbar-button {
	width: 0px;
	height: 0px;
}
.plugin-clientmap .client-list-container::-webkit-scrollbar-thumb,.module-clientmap .map-panel-box::-webkit-scrollbar-thumb {
	background: #cecece;
	border: 0px none #ffffff;
	border-radius: 50px;
}
.plugin-clientmap .client-list-container::-webkit-scrollbar-thumb:hover,.module-clientmap .map-panel-box::-webkit-scrollbar-thumb:hover {
	background: #707070;
}
.plugin-clientmap .client-list-container::-webkit-scrollbar-thumb:active,.module-clientmap .map-panel-box::-webkit-scrollbar-thumb:active {
	background: #949494;
}
.plugin-clientmap .client-list-container::-webkit-scrollbar-track,.module-clientmap .map-panel-box::-webkit-scrollbar-track {
	background: transparent;
	border: 0px none #ffffff;
	border-radius: 50px;
}
.plugin-clientmap .client-list-container::-webkit-scrollbar-track:hover,.module-clientmap .map-panel-box::-webkit-scrollbar-track:hover {
	background: #d4d4d4;
}
.plugin-clientmap .client-list-container::-webkit-scrollbar-track:active,.module-clientmap .map-panel-box::-webkit-scrollbar-track:active {
	background: #d3d3d3;
}
.plugin-clientmap .client-list-container::-webkit-scrollbar-corner,.module-clientmap .map-panel-box::-webkit-scrollbar-corner {
	background: transparent;
}

@media only screen and (max-width: 600px) {
	.plugin-clientmap .map-panel{
		width: 75%!important;
		transition: left 0.2s ease-out;
		left: -75%;
	    border-right: 1px solid grey;
    	border-collapse: collapse;
	}

	.plugin-clientmap .map-panel.visible{
		left: 0;
	}

	.plugin-clientmap .map-container{
		margin-left: 0!important;
	}

	.plugin-clientmap .map-container .leaflet-container{
		width: 100%!important;
	}

	#map-panel-button{
		height: 40px;
	    width: 40px;
	    position: absolute;
	    left: 0;
        display: flex;
	    background-color: white;
	    z-index: 1000;
        top: calc(50% - 20px);
        border: 1px solid grey;
        border-left: white;
        transition: left 0.2s ease-out;
	}

	#map-panel-button.visible{
	    left: calc(75% - 1px);
	}
	#map-panel-button.visible i{
	    transform: rotate(0.5turn);
	}

	#map-panel-button i{
		margin: auto;
	}
}