main{
	padding-bottom: 0;
}
#map-canvas{
  width: 100%;
  height: 900px;
}
.map-left,.map-right{
    padding-left: 0;
    padding-right: 0;
}
.map-side {
  background: #fff;
  position: relative;
}
.select-top-mob, .select-inner-mob, button.btn-white{
  display: none;
}
.icon-pin-blue:before{
    background: url(../images/pin-blue.png);
    background-size: cover;
}
.icon-pin-green:before{
    background: url(../images/pin-green.png);
    background-size: cover;
}
.icon-pin-orange:before{
    background: url(../images/pin-orange.png);
    background-size: cover;
}

.icon-pin-blue:before {
    background: url(../images/pin-blue.png);
    background-size: cover;
}

.icon-pin-green:before {
    background: url(../images/pin-green.png);
    background-size: cover;
}

.icon-pin-machine:before {
    background: var(--icon-path);
    background-size: cover;
}

.icon-pin:before{
    content: '';
    display: block; 
    width: 14px;
    height: 14px;
    position: absolute;
    left: 0;
    top: 7px;
}
button.locationInfo {
    background: none;
    border: none;
    padding: 12px 15px;
    color: #777;
    font-size: 13px;
    line-height: 16px;
    width: 100%;
    text-align: left;
}
button.locationInfo:before{
    content: "";
    border-top: 2px solid transparent;
    border-left: 2px solid transparent;
    display: inline-block;
    width: 8px;
    height: 8px;
    position: relative;
    top: -1px;
    margin-right: 15px;
    border-color: #777;
    -webkit-transform: rotate(225deg);
    -ms-transform: rotate(225deg);
    transform: rotate(225deg);
}
.open button.locationInfo:before{
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
.select-top-mob ul.dropdown-menu{
    margin: 0;
    padding: 5px 15px;
    font-size: 13px;
    color: #333;
    border:none;
    border-top: 1px solid #E8E8E8;
    border-radius: 0;
    box-shadow: none;
    width: 100%;
}
.select-top-mob ul.dropdown-menu>li{
    padding: 5px 0 5px 20px;
    position: relative;
}
.select-inner-mob ul.dropdown-menu{
    margin: 0;
    padding: 5px 15px;
    font-size: 13px;
    color: #333;
    border:none;
    border-top: 1px solid #E8E8E8;
    border-radius: 0;
    box-shadow: none;
    width: 100%;
    position: relative;
}
.select-inner-mob ul.dropdown-menu>li{
    padding: 5px 0 5px 20px;
    position: relative;
}
h5.map-side-title {
    display: none;
    margin: 0;
    padding: 15px;
    border-bottom: 1px solid #e8e8e8;
}
h5.map-side-title i.icon{
    float: right;
    font-size: 20px;
}
/* ============ side top ============= */
.side-top {
    background: #F8F8F8;
    border-bottom: 1px solid #e8e8e8;
    position: absolute;
    width: 100%;
    z-index: 1;
    height: 46px;
}
ul.location-type li{
    color: #777;
    font-size: 17px;
    line-height: 1.3;
    float: left;
/*    width: 25%;*/
    width:31%;
    padding: 15px;
    text-align: center;
    cursor: pointer;
}

ul.location-type li select.form-control{
    color:#22ABAD;
    border:none;
    background-color:transparent;
    -webkit-appearance:auto;
    border-bottom:2px solid;
    padding-bottom:0px;
    padding:0px;
}

ul.location-type:after{
  content: '';
  display: table;
  clear: both;
}
ul.location-type li.active{
    font-weight: 500;
    color: #000;
}

ul.location-type li.filter-district{
    padding:6.5px;
}
ul.location-type li.filter-category {
    padding: 6.5px;
}

ul.side-top-info {
    padding: 60px 0 15px 25px;
}
ul.side-top-info>li {
    padding: 5px 0 5px 20px;
    position: relative;
}
/* ============ side bottom ============= */
.side-bottom{
  height: 100%;
  overflow-y: auto;
  border-top: 2px solid #e8e8e8;
}

ul.location-list>li{
  padding: 25px 20px 25px 30px;
  border-bottom: 2px solid #e8e8e8;
  cursor: pointer;
  position: relative;
}
/*ul.location-list>li.pin-green:before{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 11px;
    height: 100%;
    background: #00C9C9;
}
ul.location-list>li.pin-green h6{
    color: #00C9C9;
}
ul.location-list>li.pin-orange:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 11px;
    height: 100%;
    background: #E4A400;
}
ul.location-list>li.pin-orange h6{
    color: #E4A400;
}
ul.location-list>li.pin-blue:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 11px;
    height: 100%;
    background: #3C8AFF;
}
ul.location-list>li.pin-blue h6{
    color: #3C8AFF;
}*/

ul.location-list>li.pin-machine:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 11px;
    height: 100%;
    background:var(--font-color)
}
ul.location-list>li.pin-machine h6 {
    color: var(--font-color)
}
ul.location-list>li.pin-machine.active {
    background: #dddcdc;
}

ul.location-list>li.pin-green.active{
  background: rgba(0,175,170,0.06);
}
ul.location-list>li.pin-blue.active{
  background: rgba(60,138,255,0.06);
}
ul.location-list>li.pin-orange.active{
  background: rgba(228,164,0,0.06);
}
/*ul.location-list>li:last-child{
  border-bottom: none;
}*/
ul.address>li {
    position: relative;
    font-size: 13px;
    padding-left: 25px;
    margin-bottom: 10px;
}
ul.address>li:last-child{
    margin-bottom: 0;
}
ul.address>li i.icon{
    font-size: 15px;
    position: absolute;
    left: 0;
}
/* ============ map ============= */
.gm-style .gm-style-iw{
  font-weight: 400;
}
.gm-style .gm-style-iw-c {
  padding: 15px 30px!important;
}
.gm-style-iw-c button.gm-ui-hover-effect{
    opacity: 1;
    top: 0!important;
    right: 0!important;
}
/* =========== 1200 ========== */
@media (max-width: 1200px){
  .map-left{
    min-width: 460px;
  }
  .map-right{
    max-width: calc(100% - 460px);
  }
}
/* =========== 992 ========== */
@media (max-width: 992px){
  .map-left{
    min-width: auto;
  }
  .map-right{
    max-width: none;
  }
  .select-top-mob,
  .select-inner-mob,
  h5.map-side-title{
    display: block;
  }
  button.btn-white{
    display: block;
    position: fixed;
    bottom: 30px;
    width: 170px;
    left: 50%;
    margin-left: -85px;
    z-index: 1;
  }
  .map-side{
    display: none;
    position: fixed;
    width: 100%;
    bottom: 0;
    max-height: calc(100% - 15px);
    overflow-y: auto;
    z-index: 1031;
    border-top-left-radius: 9px;
    border-top-right-radius: 9px;
  }
/*  .side-top{
    border-bottom: none;
    bottom: 0;
    position: fixed;
  }*/
    .side-top{
        position:relative;
    }
    .select-inner-mob {
        border-bottom: none;
        bottom: 0;
        position: fixed;
        z-index:1;
        width:100%;
        background:white;
    }
    .location-type li.filter-label{
        display:none;
    }
    ul.location-type li.filter-district{
        padding-left:10px;
        width:40%;
    }
    ul.location-type li.filter-category {
        width: 40%;
    }
  .side-bottom{
    padding-top: 0;
    max-height: initial;
    padding-bottom: 44px;
    width: 100%;
    border-top: 1px solid #e8e8e8;
  }
  #map-canvas {
    height: 600px;
  }
  ul.location-type{
    height: 45px;
    display: table;
    width: 100%;
  }
  ul.location-type li{
    padding: 0;
    float: none;
    display: table-cell;
    vertical-align: middle;
  }
  ul.side-top-info{
    display: none;
  }
}