html {
  font-family: FFDINStdRegular;
}

.desktop {
  max-width: 1300;
}

.mobile {
  display: none;
}

/* Side-Panel  */
h1 {
  font-family: FFDINStdCondensedMedium;
  font-size: 2.3em;
  margin-top: 0px;
  margin-bottom: 10px;
}

h2 {
  font-family: FFDINStdCondensedMedium;
  font-size: 1.8em;
}

h3 {
  font-size: 1.1em;
  margin-bottom: 0px;
}

.collapsible div {
  background-color: #091931;
  color: #fff;
}

.collapsible-header h2{
  margin: 0;
}

.collapsible-body {
  color: #f6f6f7 !important;
  background-color: #00163B;
  padding: 0em 1em 1em 1em;
}

.collapsible-body h3 {
  margin-top: 0;
}

.title-card {
  display: block;
  pointer-events: none;
}

.title-card a {
  pointer-events: all;
  color: #fff !important;
}

.title-card a:hover {
  color: #039be5 !important
}

.top-summary {
  color: #a0a7b3;
  margin-bottom: 0px;
}

.collapsible li.active div{
  background-color: #00163B;
}

.collapsible li.active .collapsible-header {
  border-bottom: none;
  position: relative;
  padding-bottom: 0px;
}

.collapsible li.active .collapsible-header h2 {
  margin-bottom: 0.5rem;
}

.collapsible li.active .collapsible-header:before {
  content: '';
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  top: 100px;
  right: -20px;
  bottom: 0;
  margin: auto 0;
  border-style: solid;
  border-width: 75px 0 75px 20px;
  border-color: transparent transparent transparent #00163B;
}

.collapsible-header .active {
  margin-bottom: 0px;
}

.bold-title {
  font-family: FFDINStdBold;
}

.company-count {
  color: #a0a7b3;
  font-size: .8em;
  font-family: FFDINStdBold;
}

.facility-count {
  margin-top: 5px !important;
  margin-bottom: 2px !important;
  color: #a0a7b3;
  font-size: .75em;
  font-family: FFDINStdBold;
}

.legend-title {
  color: #a0a7b3;
  font-size: .7em;
  font-family: FFDINStdBold;
  margin-bottom:  0px;
  margin-top: 0px;
}

.dots {
  margin-top: 20px;
  margin-bottom: 0;
}

.scores p{
  margin-top: 2px !important;
  padding: 0;
  margin-bottom: 2px !important;
  color: #a0a7b3;
  font-size: .8em;
}

.scores p span {
  color: #fff;
}

.score-note {
  margin-top: 0px;
}

.card-explainer {
  color: #a0a7b3;
  font-size: .8em;
  margin-top: 0px;
  padding-top: 10px;
}

.bottom-note {
  color: #a0a7b3;
  font-size: .8em;
  margin-top: 0px;
  font-style: italic;
}

.legend {
  font-family: FFDINStdCondensedRegular;
}

/* Rankings in Cards */
.rankings {
  padding-top: 20px;
  /* font-family: FFDINStdCondensedMedium; */
}
.rank-tabs {
  border-bottom: 1px solid #d8d8d8;
  background-color: #00163B;
  width: 80%;
  height: 30px;
}

.rank-tabs .indicator {
  background-color: #a0a7b3 !important;
}

.rank-tabs .tab {
  line-height:15px;
  text-transform: none;
}

.rank-tabs .tab a {
  font-size: 1em;
  color: #a0a7b3 !important;
  text-overflow: inherit;
  padding: 5px;
  text-align: center;
}

.rank-tabs .tab a:hover {
  color: #a0a7b3;
}

.rankings h3 {
  font-size: 1.2em;
  text-align: center;
  /* text-decoration: underline; */
  /* font-family: FFDINStdCondensedMedium; */
  padding-top: 10px;
}

/* .rank-tabs .tab a.active {
  font-size: 1em;
  color: #00163B;
  background-color: #fff;
  font-family: FFDINStdBold;
} */

.rankings table {
  color: #a0a7b3;
}

.rankings tr {
  border-bottom: solid 1px #a0a7b3;
}

.rankings td {
  padding: 5px 5px;
  font-size: .8em;
}

td .company {
  font-size: 1.1em;
  /* font-family: FFDINStdBold; */
  color: #fff;
  padding: 0;
  margin: 0;
}

.company-link {
  color: #fff !important;
}

.company a:hover {
  color: #039be5 !important;
}

td .industry {
  font-size: .9em;
  padding: 0;
  margin: 0;
}
/* Dropdowns */
.custom-select {
  border: 1px solid #d8d8d8;
  border-radius: 4px;
  padding: 0 .75rem 0 .75rem;
}

.custom-select .select-dropdown {
  border-bottom: none !important;
  margin-bottom: 0 !important;
}

.caret {
  margin-top: 8 !important;
  margin-bottom: 0 !important;
}

.caret i{
  color: #4a4a4a !important;
}

ul.dropdown-content.select-dropdown li span {
    color: #000;
}

.industry-cname {
  margin: 0;
  font-size: 0.8rem;
}

#autocomplete-input {
  border-bottom: 1px solid #d8d8d8 !important;
}

input[type=text]:not(.browser-default):focus:not([readonly]) {
  box-shadow: 0 1px 0 0 #205cc1 !important;
}
input[type=text]:not(.browser-default):focus:not([readonly])+label {
color: #205cc1 !important;
}

.autocomplete-content {
  position: fixed !important;
  color: #205cc1 !important;
}

.autocomplete-content.dropdown-content span{
  color: #205cc1 !important;
}

.autocomplete-content li span .highlight {
  color: #444 !important;
}

.clear-auto {
  position: absolute;
  right: -5%;
  top: 30%;
  z-index: 100;
  cursor: pointer;
}

/*
switch */
.switch-container {
  position: fixed;
  bottom: 0;
  left: 25%;
  padding: 0;
  width: 200px;
  background-color: false;
  background-image: -webkit-radial-gradient(center, cover, rgba(255, 255, 255, 0.1), transparent);
  background-image: -moz-radial-gradient(center, cover, rgba(255, 255, 255, 0.1), transparent);
  background-image: -ms-radial-gradient(center, cover, rgba(255, 255, 255, 0.1), transparent);
  background-image: -o-radial-gradient(center, cover, rgba(255, 255, 255, 0.1), transparent);
  background-image: radial-gradient(center, cover, rgba(255, 255, 255, 0.1), transparent);
}

.custom-switch {
  position: relative;
  height: 26px;
  width: 120px;
  margin: 20px auto;
  background: #fff;
  border-radius: 4px;
  border: solid #d8d8d8 1px;
  /* -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1); */
  /* box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1); */
}

.switch-label {
  position: relative;
  z-index: 2;
  float: left;
  width: 58px;
  line-height: 26px;
  font-size: 11px;
  color: #a0a7b3;
  text-align: center;
  /* text-shadow: 0 .5px .5px rgba(0, 0, 0, 0.4); */
  cursor: pointer;
}
.switch-label:active {
  font-weight: bold;
}
.switch-input {
  display: none;
}
.switch-input:checked + .switch-label {
  font-weight: bold;
  color: rgba(0, 0, 0, 0.65);
  text-shadow: 0 1px rgba(255, 255, 255, 0.25);
  -webkit-transition: 0.15s ease-out;
  -moz-transition: 0.15s ease-out;
  -ms-transition: 0.15s ease-out;
  -o-transition: 0.15s ease-out;
  transition: 0.15s ease-out;
  -webkit-transition-property: color, text-shadow;
  -moz-transition-property: color, text-shadow;
  -ms-transition-property: color, text-shadow;
  -o-transition-property: color, text-shadow;
  transition-property: color, text-shadow;
}
.switch-input:checked + .switch-label-on ~ .switch-selection {
  left: 60px;
  /* Note: left: 50%; doesn't transition in WebKit */
}

.switch-selection {
  position: absolute;
  z-index: 1;
  /* top: 2px;
  left: 2px; */
  display: block;
  width: 58px;
  height: 24px;
  border-radius: 3px;
  background-color: #65bd63;
  background-image: -webkit-linear-gradient(top, #9dd993, #65bd63);
  background-image: -moz-linear-gradient(top, #9dd993, #65bd63);
  background-image: -ms-linear-gradient(top, #9dd993, #65bd63);
  background-image: -o-linear-gradient(top, #9dd993, #65bd63);
  background-image: linear-gradient(top, #9dd993, #65bd63);
  -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
  -webkit-transition: left 0.15s ease-out;
  -moz-transition: left 0.15s ease-out;
  -ms-transition: left 0.15s ease-out;
  -o-transition: left 0.15s ease-out;
  transition: left 0.15s ease-out;
}

/* Zoom Buttons */

.instructions {
  position: fixed;
  bottom: 5;
  left: 325;
  font-family: FFDINWebProRegularItalic;
  font-size: 11px;
}

.zoom-container {
  position: fixed;
  bottom: 20;
  right: 40;
}

.zoom-control {
  border: 1px solid #d8d8d8;
  border-radius: 4px;
  background-color: #fff;
  cursor: pointer;
}

.zoom-control i {
  color: #4a4a4a !important;
}

/* Map */
#map-panel {
  width: 75%;
}

.map-container {
  display:flex;
  justify-content: center;
  align-items: center;
}

.map-wrapper {
  text-align: center;
}

.svg-container {
    display: inline-block;
    position: relative;
    width: 100%;
    padding-bottom: 65%; /* aspect ratio */
    vertical-align: top;
    overflow: hidden;
}
.svg-content-responsive {
    display: inline-block;
    position: absolute;
    top: 10px;
    left: 0;
}

.background {
  fill: none;
  pointer-events: all;
}

.mesh {
  fill: none;
}

/* Tooltip */
.d3-tip {
  line-height: 1;
  font-weight: bold;
  padding: 10px;
  background: #fff;
  color: #4A4A4A;
  box-shadow: 0 0 14px rgba(0,0,0,0.1);
  border-radius: 2px;
  pointer-events: none;
  text-align: left;
  padding: 15px;
  transition: all .2s ease-in-out;
}

/* 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: #fff;
  position: absolute;
  pointer-events: none;
}

/* Northward tooltips */
.d3-tip.n:after {
  content: "\25BC";
  margin: -1px 0 0 0;
  top: 100%;
  left: 0;
  text-align: center;
}

.d3-tip .wrap {
  width: 250px;
}

.d3-tip .company {
  border-bottom: 1px solid #f1f1f2;
  padding-bottom: 10px;
  margin-bottom: 12px;
}
.d3-tip .company strong {
  font-size: 1.5em;
  display: block;
  font-family: FFDINStdBold;
}
.d3-tip .company span {
  font-size: 12px;
  opacity: 0.7;
}

.d3-tip .company span em {
  font-style: normal;
}
.d3-tip strong {
  font-family: FFDINStdBold;
}
.d3-tip ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.d3-tip li {
  font-size: 14px;
  line-height: 20px;
  margin-bottom: 6px;
}

.d3-tip hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #f1f1f2;
  margin: .5em 0;
  padding: 0;
}

.d3-tip .sub-p {
  font-size: 11px;
  opacity: 0.9;
}
.d3-tip a {
  border-top: 1px solid #f1f1f2;
  padding-top: 10px;
  margin-top: 12px;
}
.d3-tip .total {
  text-transform: uppercase;
  font-size: 13px;
}

.increase {
  color: red !important;
}

.decrease {
  color: green !important;
}

@media only screen
  and (max-width : 600px) {
    .desktop {
      display: none;
    }
    .mobile {
      display: block;
    }
    .row.mobile-top {
      margin-bottom: 0;
    }
    .mobile-top {
      background-color: #091931;
      padding: 0.75rem;
    }
    .mobile-top h1 {
      color: #fff;
    }
    .tab-holder {
      margin-left: 0;
      margin-right: 0;
      background-color: #091931;
    }
    .tabs {
      background-color: #091931;
    }
    .m-tab {
      background-color: #091931;
    }
    .m-tab a{
      color: #fff !important;
      font-size: 1.5em !important;
    }
    .m-tab a.active {
      background-color: #fff !important;
      color: #091931 !important;
    }
    .tabs .indicator {
      background-color: #fff !important;
    }
    .switch-container {
      position: relative;
    }
    .filter.collapsible {
      border: none !important;
      box-shadow: none !important;
      text-align: center;
    }
    .filter .collapsible-header {
      border: 1px solid #d8d8d8;
      border-radius: 4px;
      background-color: #fff;
      cursor: pointer;
      color: #184fbc;
      position: absolute;
      right: 20;
      padding: 0.5rem;
      font-family: FFDINStdBold;
      text-align: center;
    }
    .filter .collapsible-header i {
      display: none;
    }
    .collapsible li div{
       background-color: #fff !important;
       color: #000;
     }
    .collapsible li.active .collapsible-header:before {
      display: none;
    }
    .collapsible li.active .collapsible-header {
      right: 0;
      padding-bottom: 10px;
      border-bottom: 1px solid #d8d8d8;
      border-top: none;
      border-left: none;
      border-right: none;
      background-color: #fff;
    }
    .collapsible li.active .collapsible-header span {
      position: absolute;
      left: 20;
      bottom: 10;
    }
    .collapsible li.active .collapsible-header i {
      display: block;
      position: absolute;
      right: 5;
      bottom: 10;
      color: #4a4a4a;
      font-size: 1.5rem;
    }
    .collapsible li.active .collapsible-body {
      background-color: #fff
    }
    .clear-container {
      padding-top: 10px;
      padding-bottom: 0;
    }
    .clear {
      color: #184fbc;
      cursor: pointer;
    }
    .mcard h2 {
      margin-top: 0;
      margin-bottom: 0;
    }
    .mcard h3 {
      margin-top: 5;
    }

    .rank-tabs a.active {
      background-color: #fff !important;
      color: #091931 !important;
      font-size: 1.2em !important;
    }
    td .company-link {
      color: #000 !important;
    }
    .scores p span {
      color: #000;
    }

    .bottom-note {
      padding: 10px;
    }

  }