/* Custom, iPhone Retina */
/* Extra Small Devices, Phones */
@media only screen and (max-width: 480px) {
  .btn {
    width: 100%;
    margin-top: .5em; } }

/* Small Devices, Tablets */
body {
  font-size: 16px; }

#logo {
  float: left;
  width: 36px;
  margin: -0.3em 0.5em; }

footer {
  text-align: center;
  background: #EFEFEF;
  font-size: 0.9em;
  color: gray;
  padding: 2em 1.5em;
  margin-top: 1.5em; }
  footer p {
    line-height: 1em; }

h1, h2 {
  border-bottom: 0.1em solid #075EB5;
  padding-bottom: .25em;
  margin: 0.25em 0 0.75em 0; }
  h1 img, h2 img {
    height: 1.2em;
    margin: -0.15em 0.1em 0 0; }
  h1 span, h2 span {
    margin-left: .25em;
    font-size: 0.7em;
    color: #086bce; }
  @media (max-width: 480px) {
    h1, h2 {
      text-align: center;
      font-size: 1.75em; }
      h1 img, h2 img {
        display: none; }
      h1 span, h2 span {
        width: 100%;
        display: block;
        margin: 0.5em 0 0 0; } }

h2 {
  font-size: 1.75em;
  margin-top: 1em;
  border-bottom: .075em solid #CCC; }

h3 {
  font-size: 1.25em;
  color: #b55e07; }

.well h3 {
  margin-top: 0;
}

h5 {
  font-weight: 900;
}

#side-nav a {
  padding: 5px 10px; }

.table {
  margin-top: 1em; }

.top-spaced {
  margin-top: 1em; }

.bottom-spaced {
  margin-bottom: 1em; }

.right-spaced {
  margin-right: 1em; }

.left-spaced {
  margin-left: 1em; }

.spaced {
  margin: 0.5em 0 0.5em 0; }

.help-tip {
  text-align: center;
  background-color: #86BDD8;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  font-size: 14px;
  line-height: 26px;
  cursor: default;
  display: inline-block; }

.help-tip:before {
  content: '?';
  font-weight: bold;
  color: #fff; }

.help-tip:hover div {
  z-index: 999;
  display: block;
  -webkit-transform-origin: 100% 0%;
  transform-origin: 100% 0%;
  -webkit-animation: fadeIn 0.3s ease-in-out;
  animation: fadeIn 0.3s ease-in-out; }

.help-tip div {
  /* The tooltip */
  display: none;
  text-align: left;
  background-color: #1E2021;
  padding: 20px;
  width: 300px;
  position: absolute;
  border-radius: 3px;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
  right: -4px;
  color: #FFF;
  font-size: 13px;
  line-height: 1.4; }

.help-tip div:after {
  /* Prevents the tooltip from being hidden */
  width: 100%;
  height: 40px;
  content: '';
  position: absolute;
  top: -40px;
  left: 0; }

.help-tip div > h6 {
  font-weight: 900;
  font-size: 1.1em;
  margin-top: 0px;
  padding-bottom: 3px;
  border-bottom: 1px solid #fff;
}

/* CSS animation */
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.6);
    transform: scale(0.6); }
  100% {
    opacity: 100%;
    -webkit-transform: scale(1);
    transform: scale(1); } }

@keyframes fadeIn {
  0% {
    opacity: 0; }
  100% {
    opacity: 100%; } }

.ResponsiveLinkUnit {
  margin-top: 1em;
  width: 100%;
  overflow: hidden; }

.ResponsiveAd {
  margin: 0.5em 0 0.5em 0; }

.SpacedAd {
  margin: 1em 0 1em 0; }

#feedback {
  height: 104px;
  width: 104px;
  width: 104px;
  position: fixed;
  top: 40%;
  z-index: 999;
  transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); }

#feedback a {
  display: block;
  background: #2C3E50;
  height: 2em;
  width: 6.5em;
  padding: 0.5em 1em;
  color: #fff;
  font-family: Arial, sans-serif;
  font-size: 17px;
  font-weight: bold;
  text-decoration: none;
  border-bottom: solid 1px #333;
  border-left: solid 1px #333;
  border-right: solid 1px #fff;
  border-bottom-right-radius: .5em;
  border-bottom-left-radius: .5em; }

#feedback a:hover {
  height: 2.5em;
  padding-top: 1em;
  background: #075EB5; }

#instantFeedbackModal .modal-header {
  border-top-right-radius: .25em;
  border-top-left-radius: .25em;
  background: #075EB5;
  color: white; }

@media only screen and (max-width: 800px) {
  /* Force table to not be like tables anymore */
  .responsive-table table,
  .responsive-table thead,
  .responsive-table tbody,
  .responsive-table th,
  .responsive-table td,
  .responsive-table tr {
    display: block !important; }
  /* Hide table headers (but not display: none;, for accessibility) */
  .responsive-table thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px; }
  .responsive-table tr {
    border: 1px solid #ccc; }
  .responsive-table td {
    /* Behave  like a "row" */
    border: none;
    border-bottom: 1px solid #eee;
    position: relative !important;
    padding-left: 50% !important;
    white-space: normal !important;
    text-align: left !important; }
  .responsive-table td:before {
    /* Now like a table header */
    position: absolute !important;
    /* Top/left values mimic padding */
    top: 6px !important;
    left: 6px !important;
    width: 45% !important;
    padding-right: 10px !important;
    white-space: nowrap !important;
    text-align: left !important;
    font-weight: bold !important; }
  /*
  Label the data
  */
  .responsive-table td:before {
    content: attr(data-title); }
  .ResponsiveAd {
    margin: 1em 0 1em 0; } }

#map {
  height: 300px;
  margin: 10px;
}
@media (max-width: 480px) {
  #map {
    height: 200px;
  }
}

.mapbox {
  position: relative;
  width: 100%;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-bottom: 1em;
  background-color: #F7F8FF;
  padding: 1em 1em 2em 1em;
}

.colorBox {
    width: 16px;
    height: 16px;
    border: 1px solid black;
    float: left;
    margin-right: 6px;
    margin-top: 0.2em;
}

.colorBoxInline {
    width: 16px;
    height: 16px;
    border: 1px solid black;
    display: inline-block;
    margin-top: 0.2em;
}

#legend {
    position: absolute;
    font-size: 0.9em;
    bottom: 9em;
    right: 1em;
    height: 2em;
    padding: 6px;
}

.female {
  color: #E6637A;
  font-weight: 900;
}
.male {
  color: #3E32FF;
  font-weight: 900;
}
.neutral {
  color: #A0A0A0;
  font-weight: 900;
}

.faded {
  opacity: 0.8;
} 

.blue-bg {
    border: 1px solid #C5C5C5;
    border-bottom: 5px solid #3E32FF;
}
.pink-bg {
    border: 1px solid #C5C5C5;
    border-bottom: 5px solid #E6637A;
}


input[type=range] {
  -webkit-appearance: none;
  margin: 10px 0;
  width: 100%;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 10px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 1px 1px 1px #000000;
  background: #3071A9;
  border-radius: 5px;
  border: 1px solid #000000;
}
input[type=range]::-webkit-slider-thumb {
  box-shadow: 1px 1px 1px #000000;
  border: 1px solid #000000;
  height: 30px;
  width: 15px;
  border-radius: 5px;
  background: #FFFFFF;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -11px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: #3071A9;
}
input[type=range]::-moz-range-track {
  width: 100%;
  height: 10px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 1px 1px 1px #000000;
  background: #3071A9;
  border-radius: 5px;
  border: 1px solid #000000;
}
input[type=range]::-moz-range-thumb {
  box-shadow: 1px 1px 1px #000000;
  border: 1px solid #000000;
  height: 30px;
  width: 15px;
  border-radius: 5px;
  background: #FFFFFF;
  cursor: pointer;
}
input[type=range]::-ms-track {
  width: 100%;
  height: 10px;
  cursor: pointer;
  animate: 0.2s;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  background: #3071A9;
  border: 1px solid #000000;
  border-radius: 10px;
  box-shadow: 1px 1px 1px #000000;
}
input[type=range]::-ms-fill-upper {
  background: #3071A9;
  border: 1px solid #000000;
  border-radius: 10px;
  box-shadow: 1px 1px 1px #000000;
}
input[type=range]::-ms-thumb {
  box-shadow: 1px 1px 1px #000000;
  border: 1px solid #000000;
  height: 30px;
  width: 15px;
  border-radius: 5px;
  background: #FFFFFF;
  cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
  background: #3071A9;
}
input[type=range]:focus::-ms-fill-upper {
  background: #3071A9;
}

table.sortable th:not(.sorttable_sorted):not(.sorttable_sorted_reverse):not(.sorttable_nosort):after { 
    content: " \25B4\25BE" 
}