#map {
  width:960px;
  height:500px;
}
#legend {
  position: absolute;
  /*top: 3px;
  left: 780px;*/
  right: 40px;
  margin: 4px;
  padding: 5px;
  padding-top: 0px;
  border-radius: 5px;
  z-index: 1000;
  font-size: 1em;
  font-family: sans-serif;
  width: 165px;
  background: rgba(255,255,255,0.6);
  max-height: 200px;
  overflow-y: scroll;
}
.legendheading {
  position: relative;
  padding: 5px 2px 0px 2px;
  font-size: medium;
  font-weight: bold;
}
.legenditem {
  padding: 2px;
  margin-bottom: 2px;
}

/*Marker clusters*/
.marker-cluster-pie g.arc{
  fill-opacity: 0.5;
}
.marker-cluster-pie-label {
  font-size: 14px;
  font-weight: bold;
  font-family: sans-serif;
}

/*Markers*/
.marker {
  width: 18px;
  height: 18px;
  border-width: 2px;
  border-radius:10px;
  margin-top: -10px;
  margin-left: -10px;
  border-style: solid;
  fill: #CCC;
  stroke: #444;
  background: #CCC;
  border-color: #444;
}
.marker div{
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  font-family: sans-serif;
}

/*marker categories*/
.category-1{
  fill: #F88;
  stroke: #800;
  background: rgba(255, 136, 136, 0.6);
  border-color: #800;
}
.category-2{
  fill: #FA0;
  stroke: #B60;
  background: rgba(255, 170, 0, 0.6);
  border-color: #B60;
}
.category-3{
  fill: #FF3;
  stroke: #D80;
  background: rgba(255, 255, 51, 0.6);
  border-color: #D80;
}
.category-4{
  fill: #BFB;
  stroke: #070;
  background: rgba(187, 255, 187, 0.6);
  border-color: #070;
}
.category-5{
  fill: #9DF;
  stroke: #007;
  background: rgba(153, 221, 255, 0.6);
  border-color: #007;
}

/*Popup*/
.map-popup span.heading {
  display: block;
  font-size: 1.2em;
  font-weight: bold;
}
.map-popup span.attribute {
  display: block;
}
.map-popup span.label {
  font-weight: bold;
  font-size: 11px;
  color: black;
}

.leaflet-tooltip.leaflet-tooltip-right {
  margin-left: 22px;
  padding: 4px;
}

.cluster-popup .cluster-popup-item{
  padding: 1px 2px;
  margin-bottom: 1px;
}

/* customizing slider start */
md-slider.md-default-theme .md-track.md-track-fill, md-slider .md-track.md-track-fill{
    background-color: rgb(158, 158, 158);
}
md-slider.pinky .md-thumb:after{
    background-color: rgb(255,64,129);
    border-color: rgb(255,64,129);
}
.slider-wrapper{
    margin-top: 3px;
}
.timeline-start{
    float: left;
}
.timeline-end{
    float: right;
}
.md-thumb-text{
    display: none;
}
.timeline-start-line{
    height: 30px;
    position: relative;
    float: left;
    border-left: 1px solid #9e9e9e;
    top: -38px;
    margin-left: 3px;
}
.timeline-end-line{
    height: 30px;
    position: relative;
    float: right;
    border-right: 1px solid #9e9e9e;
    top: -38px;
    margin-right: 3px;
}
/* customizing slider end */
.slider-current-view{
    width: max-content;
    display: inline-block;
    position: relative;
    top: 10px;
}
#legend .channel-name-text{
    white-space: nowrap;
    max-width: 105px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    vertical-align: middle;
}
#legend .channel-count{
    display: inline-block;
    vertical-align: middle;
}