:root {
  --dark-blue-color: #002f6c;
}

body {
  font-family: 'Source Sans Pro';
  background-color: transparent;
}

.region-select-container {
  /*z-index: 1000 !important;*/
  /*position: absolute;*/
  /*left: 0;*/
  /*top: 0;*/
  /*bottom: 5px;*/
  /*border-radius: 8px;*/
  /*display: flex;*/
  flex: 1;
  margin-left: -.626rem; /*container-fluid class has the same margin, here is being annulled */
}

.regions-menu {
  padding: 0;
  border-top-right-radius: 8px;
  font-size: 14px;
  background: var(--dark-blue-color);
  height: 100%;
  /*max-width: 110px;*/
  display: flex;
  flex-direction: column;
}

.regions-menu-item {
  padding: 10px;
  border-bottom: 1px solid white;
  text-align: center;
  cursor: pointer;
  min-height: 105px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  justify-items: center;
  align-items: center;
  align-content: center;
}

.regions-menu-item:nth-of-type(1) {
  border-top: 1px solid white;
}

.regions-menu-item i {
  color: white;
  font-size: 1.5em;
  padding-bottom: 4px;
}

.regions-menu-item.active {
  background: #0067b6;
  font-weight: bold;
}

.regions-menu-item.active:first-child {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.regions-menu-item.active i {
  color: white;
}

.regions-menu-item span {
  color: white;
}

.map-wrapper {
  position: relative;
}

.map-legend-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: left;
  /*padding-bottom: 16px;*/
  padding-top: 16px;
}

.map-legend-title {
  color: var(--dark-blue-color);
  font-size: 1.3rem;
  font-weight: bold;
}

.map-legend-subtitle {
  color: var(--dark-blue-color);
  font-size: 0.8rem;
}

.map-legend .min {
  float: left;
  color: var(--dark-blue-color);
  font-size: 0.8rem;
}

.map-legend .max {
  float: right;
  color: var(--dark-blue-color);
  font-size: 0.8rem;
}

.map-legend-gradient {
  width: 100%;
  height: 18px;
}

.scatter-legend {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 50%;
  margin: 0 auto;
}

.map-controls {
  display: flex;
  justify-content: right;
  padding-top: 16px;
  padding-right: 0;
}

.map-control {
  border: 1px solid lightgray;
  cursor: pointer;
  position: relative;
  width: 200px;
  height: 100px;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  margin-right: 12px;
}

.map-control.active {
  -webkit-box-shadow: 0 10px 6px -6px #777;
  -moz-box-shadow: 0 10px 6px -6px #777;
  box-shadow: 0 10px 6px -6px #777;
}

.map-control[data-indicator="sanitation"] {
  background-image: url("../images/sanitation_inactive.png");
  background-repeat: no-repeat;
  background-size: 200px;
}

.map-control.active[data-indicator="sanitation"] {
  background-image: url("../images/sanitation_active.png");
  background-repeat: no-repeat;
  background-size: 200px;
}

.map-control[data-indicator="water"] {
  background-image: url("../images/water_inactive.png");
  background-repeat: no-repeat;
  background-size: 200px;
}

.map-control.active[data-indicator="water"] {
  background-image: url("../images/water_active.png");
  background-repeat: no-repeat;
  background-size: 200px;
}

.map-control[data-indicator="mpi"] {
  background-image: url("../images/mpi_active2.png");
  background-repeat: no-repeat;
  background-size: 215px;
}

.map-control.active[data-indicator="mpi"] {
  background-image: url("../images/mpi_inactive2.png");
  background-repeat: no-repeat;
  background-size: 215px;
}

.map-control[data-indicator="ethnicities"] {
  background-image: url("../images/ethnicities_inactive.png");
  background-repeat: no-repeat;
  background-size: 200px;
}

.map-control.active[data-indicator="ethnicities"] {
  background-image: url("../images/ethnicities_active.png");
  background-repeat: no-repeat;
  background-size: 200px;
}

.map-control-title {
  position: absolute;
  bottom: 0;
  width: 100%;
  text-align: center;
  color: var(--dark-blue-color);
  font-size: 14px;
  user-select: none;
}

.map-control.active .map-control-overlay {
  background-color: transparent;
}

.map-control.active .map-control-title {
  /*font-weight: bold;*/
}

.map-control-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(138, 138, 138, 0.2);
}

.popover {
  max-width: 400px !important;
  z-index: 10000;
  background: white;
  padding: 10px;
  height: 300px;
}

.popover-body {
  height: 280px;
  overflow-y: scroll;
}

.popover h4 {
  color: var(--dark-blue-color);
  margin: 0 auto !important;
}

.popover ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
  font-family: var(--font-family-sans-serif);
  border: none;
}

.popover ul > li {
  clear: both;
}

.popover ul > li p {
  float: left;
  max-width: 200px;
  margin: 0 20px 0 0;
  color: var(--dark-blue-color);
}

.popover ul > li span {
  float: right;
  font-weight: 600;
}

.popover ul > li:last-child {
  border-bottom: none;
}

.popover p {
  float: left;
  max-width: 200px;
  margin: 0 20px 0 0;
  color: white;
}

.popover .th {
  background: #002f6c;
}

.popover .blue-paragraph {
  color: #002f6c;
}

.popover .opacity-0 {
  color: #002f6cff;
}

 .popover .opacity-1 {
   color: #002f6cF7;
 }

.popover .opacity-2 {
  color: #002f6cF0;
}

.popover .opacity-3 {
  color: #002f6cE6;
}

.popover .opacity-4 {
  color: #002f6cDE;
}

.popover .opacity-5 {
  color: #002f6cD6;
}

.popover .opacity-6 {
  color: #002f6cCC;
}

.popover .opacity-7 {
  color: #002f6cC4;
}

.popover .opacity-8 {
  color: #002f6cBD;
}

.popover .opacity-9 {
  color: #002f6cB3;
}

.popover .opacity-10 {
  color: #002f6cAB;
}

.popover .opacity-11 {
  color: #002f6cA3;
}

.popover .opacity-12 {
  color: #002f6c99;
}

.popover .opacity-13 {
  color: #002f6c91;
}

.popover .opacity-14 {
  color: #002f6c8A;
}

.popover .opacity-15 {
  color: #002f6c80;
}

.popover .opacity-16 {
  color: #002f6c78;
}

.popover .opacity-17 {
  color: #002f6c70;
}

.popover .opacity-18 {
  color: #002f6c6B;
}

.popover .opacity-19 {
  color: #002f6c66;
}

.popover .opacity-20 {
  color: #002f6c61;
}

.popover .sanitation-opacity-0 {
  color: #e5850fff;
}

.popover .sanitation-opacity-1 {
  color: #e5850fF7;
}

.popover .sanitation-opacity-2 {
  color: #e5850fF0;
}

.popover .sanitation-opacity-3 {
  color: #e5850fE6;
}

.popover .sanitation-opacity-4 {
  color: #e5850fDE;
}

.popover .sanitation-opacity-5 {
  color: #e5850fD6;
}

.popover .sanitation-opacity-6 {
  color: #e5850fCC;
}

.popover .sanitation-opacity-7 {
  color: #e5850fC4;
}

.popover .sanitation-opacity-8 {
  color: #e5850fBD;
}

.popover .sanitation-opacity-9 {
  color: #e5850fB3;
}

.popover .sanitation-opacity-10 {
  color: #e5850fAB;
}

.popover .sanitation-opacity-11 {
  color: #e5850fA3;
}

.popover .sanitation-opacity-12 {
  color: #e5850f99;
}

.popover .sanitation-opacity-13 {
  color: #e5850f91;
}

.popover .sanitation-opacity-14 {
  color: #e5850f8A;
}

.popover .sanitation-opacity-15 {
  color: #e5850f80;
}

.popover .sanitation-opacity-16 {
  color: #e5850f78;
}

.popover .sanitation-opacity-17 {
  color: #e5850f70;
}

.popover .sanitation-opacity-18 {
  color: #e5850f6B;
}

.popover .sanitation-opacity-19 {
  color: #e5850f66;
}

.popover .sanitation-opacity-20 {
  color: #e5850f61;
}

.popover .mpi-opacity-0 {
  color: #651d32ff;
}

.popover .mpi-opacity-1 {
  color: #651d32F7;
}

.popover .mpi-opacity-2 {
  color: #651d32F0;
}

.popover .mpi-opacity-3 {
  color: #651d32E6;
}

.popover .mpi-opacity-4 {
  color: #651d32DE;
}

.popover .mpi-opacity-5 {
  color: #651d32D6;
}

.popover .mpi-opacity-6 {
  color: #651d32CC;
}

.popover .mpi-opacity-7 {
  color: #651d32C4;
}

.popover .mpi-opacity-8 {
  color: #651d32BD;
}

.popover .mpi-opacity-9 {
  color: #651d32B3;
}

.popover .mpi-opacity-10 {
  color: #651d32AB;
}

.popover .mpi-opacity-11 {
  color: #651d32A3;
}

.popover .mpi-opacity-12 {
  color: #651d3299;
}

.popover .mpi-opacity-13 {
  color: #651d3291;
}

.popover .mpi-opacity-14 {
  color: #651d328A;
}

.popover .mpi-opacity-15 {
  color: #651d3280;
}

.popover .mpi-opacity-16 {
  color: #651d3278;
}

.popover .mpi-opacity-17 {
  color: #651d3270;
}

.popover .mpi-opacity-18 {
  color: #651d326B;
}

.popover .mpi-opacity-19 {
  color: #651d3266;
}

.popover .mpi-opacity-20 {
  color: #651d3261;
}

.side-panel {
  position: absolute;
}

.side-panel h3 {
  font-size: 1.1rem;
  font-weight: bold;
}

.side-panel .text-muted {
  font-size: 0.7rem;
}

.side-panel .btn-close {
  position: absolute;
  right: 12px;
  top: 12px;
}

#details-ethnicities-accordion .card {
  border-radius: 0;
}

#details-ethnicities-accordion .card-title a {
  text-decoration: none;
}

.modal-header {
  background-color: var(--dark-blue-color) !important;
  color: #ffffff;
}

.modal-header h1 {
  font-weight: bold;
}

.modal-body {
  font-size: 1rem;
}

.card-header h6 a {
  color: #0067b6 !important;
  font-size: 1.1rem !important;
  font-weight: bold !important;
}

.card-header.active {
  background-color: #0067b6 !important;
}

.card-header.active a {
  color: #ffffff !important;
}

.card-group-control .card-title > a:before {
  font-family: "Font Awesome 5 Pro";
  content: '\f077';
}

.card-group-control .card-title>a.collapsed:before {
  content: '\f078';
}

.toggles-container {
  position: absolute;
  top: 20px;
  right: 20px;
}

.text-usaid-blue {
  color: #002f6c;
}

.text-usaid-red {
  color: #ba0c2f;
}

.header {
  margin: 0 -24px;
  background-color: #fff;
}

.header h3 {
  padding-top: 0 !important;
}

.header h4 {
  padding-top: 0 !important;
}

.header-logo {
  max-height: 64px;
}

.switches-container {
  display: flex;
  flex-direction: column;
}

.switch-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
}

#details-link {
  text-decoration: underline;
  font-size: 16px;
  color: #ba0c2f;
}

.footer {
  background: #002f6c;
  color: white;
  width: 100%;
}

.map-section {
  display: flex;
  flex-direction: row;
  position: relative;
  margin-left: 0 !important;
  padding-left: 0 !important;
}