.marker-pin {
  width: 30px;
  height: 30px;
  border-radius: 50% 50% 50% 0;
  background: #bbb;
  position: absolute;
  transform: rotate(-45deg);
  left: 50%;
  top: 50%;
  margin: -15px 0 0 -15px;
}
// to draw white circle
.marker-pin-center {
    content: '.';
    width: 24px;
    height: 24px;
    margin: 3px 0 0 3px;
    background: #fff;
    position: absolute;
    border-radius: 50%;
 }

// to align icon
.custom-div-icon i {
   position: absolute;
   width: 22px;
   font-size: 22px;
   left: 15;
   right: 0;
   margin: 30px auto;
   text-align: center;
}

.custom-div-icon i.awesome {
    margin: 12px auto;
    font-size: 17px;
 }
 
 .red {
	 color: red;
 }
 
 .green {
	 color: green;
 }
 
 .cercle {
	font-size: 12pt;
	line-height: 20px; /* set to same size as width, height */
    width: 30px;
    height: 30px;
	background-color: #fff;
	border-radius: 50%;
	text-align: center;
 }