body {
    position: relative;
}

.container-fluid {
    padding-left: 20%;
    padding-right: 20%;
}

.dc-data-count small {
    font-size: 16px;
}

#count-row {
    margin-top: 0px;
    padding: 0px;
}

.legendThreshold {
    font-size: 12px;
    font-family: sans-serif;
}

.Icon {
    /* display: block; */
    margin-left: 20%;
    margin-right: auto;
    width: 22%;
    height: 14%;

}



.caption {
    fill: #000;
    text-anchor: start;
    font-weight: bold;
}


.header {
    margin-top: 45px;
    margin-bottom: 95px;

}

#sub-heading {
    font-family: 'Esteban', serif;
    font-weight: bold;
    font-size: 18px;
    text-align: center;
    position: relative;
    /* top: 35px; */
    margin-top: 8px;
}

.header h3 {
    font-family: 'Esteban';
    position: relative;
    text-align: center;
    top: 25px;

}

.header button {

    position: relative;
    top: 25px;
}

.section-header {
    font-family: 'Esteban'
}


.dc-chart .axis text {
    font-size: 12px;
}

#map {
    height: 700px;
    width: 100%;
}

#main-title #main-subtitle {
    font-family: 'Barrio';
    margin: 0;
    position: absolute;
    top: 100%;
    /* left: 50%; */
}

.legend-map {
    position: absolute;
    background-color: rgba(255, 255, 255, 0.8);
    padding-top: 10px;
    padding-left: 5px;
    bottom: 130px;
    left: 5px;
    width: 160px;
    height: 90px;
    border-radius: 10px;
    z-index: 9999999;
    line-height: 10px;
    color: hsl(0, 87%, 3%);
    font-size: 13px;

}

.dot_1 {
    height: 15px;
    width: 15px;
    background-color: #7B20E9;
    border-radius: 50%;
    display: inline-block;
}

.dot_2 {
    height: 15px;
    width: 15px;
    background-color: #204CE9;
    border-radius: 50%;
    display: inline-block;
}

.dot_3 {
    height: 15px;
    width: 15px;
    background-color: #20D2E9;
    border-radius: 50%;
    display: inline-block;
}


#legend_title {
    font-size: 15px;
    font-weight: bold;
}

.legend-cluster {
  position: absolute;
  background-color: rgba(255, 255, 255, 0.8);
  padding-top: 10px;
  padding-left: 5px;
  bottom: 30px;          /* sits above .legend-map */
  left: 5px;
  width: 160px;
  height: 95px;
  border-radius: 10px;
  z-index: 9999999;
  line-height: 25px;
  color: hsl(0, 87%, 3%);
  font-size: 13px;
}

/* ---------- two-tone circles ------------------ */
.cluster-icon {
  display: inline-block;
  width: 22px;           /* match halo size */
  height: 22px;
  border-radius: 50%;
  position: relative;
  margin-right: 4px;
  vertical-align: middle;
}
.cluster-icon::after {   /* inner core */
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
}

/* colors pulled from your .marker-cluster-* CSS */
.cluster-small  { background-color: #f7e5b8; }
.cluster-small::after  { background-color: #FCBA04; }

.cluster-medium { background-color: #f3ce94; }
.cluster-medium::after { background-color: #db7e03; }

.cluster-large  { background-color: #f1a082; }
.cluster-large::after  { background-color: #e94a42; }


.leaflet-heatmap-layer {
  opacity: 0.8 !important;
}


/* --- SMALLER ICON INSIDE (change only these numbers) --- */
.printButton {
    width: 24px;
    /* shrink just the glyph */
    height: 24px;
    pointer-events: none;
    /* let the container handle clicks/hover */
}

/* --- Hover effect stays on the container --- */
.leaflet-control.print-control:hover {
    background: #f1f1f1;
    box-shadow: 0 4px 8px rgba(0, 0, 0, .2);
}


#control-row {
    padding-bottom: 20px;
}


a {
    cursor: pointer
}



dd {
    display: block;
    margin-left: 20px;
}

.dc-chart g.row text {
    font-family: 'Barrio';
    fill: #141314;
    font-size: 0.8em;
    pointer-events: inherit;
}

.dc-chart .pie-slice {
    fill: #352525;
    font-size: 10px;
    cursor: pointer;
}


text {
    font-size: 10px;
}

#paging {
    text-align: left;
    font-weight: bold;
}

label {
    text-align: left;
}

#data-table_filter {
    text-align: left;
}

svg {
    display: block;
}

#data-table th span {
    float: right;
    font-size: 0.8em;
    display: inline-block;
}

#data-table th {
    cursor: pointer;
}

#data-table td,
#data-table th {
    border: 1px solid #ddd;
    padding: 8px;


}

#data-table tr:nth-child(even) {
    background-color: #f2f2f2;
}

#data-table tr:hover {
    background-color: #ddd;
}

#data-table th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    background-color: #5e5865;
    color: white;
}


#data-table {
    /* overflow-x: scroll; */
    /* max-width: 100%; */
    display: block;
    border-collapse: collapse;

    /* border-spacing: 3px;
    border-color: black; */
    /* white-space: nowrap; */
}

#data-table td:nth-child(1),
#data-table td:nth-child(2),
#data-table td:nth-child(3),
#data-table td:nth-child(4),
#data-table td:nth-child(5),
#data-table td:nth-child(6) {
    min-width: 152px;
}


nav {

    font-family: 'Esteban';
    font-size: medium;
    /* min-height: 140px */
}

.navbar-brand {
    padding: 15px 10px;
    /* height: 140px;
    line-height: 140px; */
}


.navbar-nav li a:hover {
    color: #fff !important;
}


.navbar-default .navbar-toggle {
    border-color: transparent;
}


.custom-popup {
    border-radius: 2px;
    color: #504e4e;
    font-family: 'Molengo', sans-serif;
    font-size: 12px;
    line-height: 10px;
    height: 10 px;
    max-height: 300px;
}

.custom-popup,
.leaflet-popup-tip {
    background: #e7e7e7;
    border: none;
    box-shadow: none;
}

.leaflet-popup-content-wrapper {
    background: #ffffff;
    opacity: 90%;
    border-radius: 16px;
    max-width: 280px;
}

.leaflet-popup {
    position: absolute;
    text-align: center;
}

.leaflet-popup-content {
    margin-top: 20px;
    margin-right: 2px;
    padding-right: 12px;
    min-width: 100 px !important;
    max-height: 300px;
    overflow: auto;
}


#loadingGIF {
    position: fixed;
    /* position: absolute; */
    top: 0px;
    right: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: #ffffff url('../images/loader.gif') no-repeat 50% 50%;
    z-index: 9999;
}


/* Caption text */

.text {
    color: #f2f2f2;
    font-size: 15px;
    padding: 8px 12px;
    position: absolute;
    bottom: 8px;
    width: 100%;
    text-align: center;
}


/* Number text (1/3 etc) */

.numbertext {
    color: #f2f2f2;
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top: 0;
}


/* The dots/bullets/indicators */

.dot {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}

.active,
.dot:hover {
    background-color: #717171;
}

/* testing out d3 tooltip */

.d3-tip {
    line-height: 1;
    font-weight: bold;
    border-style: solid;
    border-color: #4D8EAD;
    box-shadow: 4px 4px 2px #888888;
    border-width: 1px;
    padding: 6px;
    background: white;
    /*   background: rgba(0, 0, 0, 0.8);*/
    color: #193E52;
    /*#fff;*/
    border-radius: 0px;
}

.ss_tooltip_class .ss_date {
    background: #011723;
    color: #fff;
    padding: 3px 30px 1px 30px
}


/* Creates a small triangle extender for the tooltip */

.d3-tip:after {
    box-sizing: border-box;
    display: inline;
    font-size: 10px;
    width: 100%;
    line-height: 1;
    color: #193E52;
    content: "\25BC";
    position: absolute;
    text-align: center;
}

.dc-chart g.row text {
    fill: black;
}