body {
  background: url('https://images.unsplash.com/photo-1434543177303-ef2cc7707e0d?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=a17f75f6358c084b55f4d373013eb5f9');
  background-size: cover;
}
/********************************************************************************************************************/
/* load icon css */
/***************************************************************************************************************/
/* When the body has the loading class, we turn
the scrollbar off with overflow:hidden */
body.loading {
  overflow: hidden;
}

/* Anytime the body has the loading class, our
modal element will be visible */
body.loading .modal-load {
  display: block;
}

.loading {
  color: #ccc;
}
.map { width: 100%; height: calc(100vh - 200px); }
.navbar {
  background: rgba(10, 10, 10, 0.6);
  border-radius: 0px;
}

.panel {
  background: rgba(0, 0, 0, 0);
  border: 0px;
  border-radius: 0px;
}

.panel-default .panel-heading {
  background: rgba(255, 255, 255, 0.6);
  border: 0px;
  border-radius: 0px;
  height: 36px;
}

.panel .panel-heading, .panel .panel-title {
  color: #222;
  line-height: 1.42857143;
  text-transform: none;
  font-size: 14px;
  font-weight: 600;
}

.panel-default .panel-title {
  color: #000;
}

.panel .panel-body {
  padding: 0px;
}

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover {
  background: rgba(10, 10, 10, 0.2);
}

.btn-default.btn-on-3.active{background-color: rgba(0, 252, 0, 0.37);color: rgb(8, 241, 66);}
.btn-default.btn-off-3.active{background-color: rgb(236, 148, 15);color: rgb(252, 248, 5);}

.reload:hover {
  cursor: pointer;
  color: blue;
}

.table > tbody > tr:first-child > td {
  border: 0px;
}

.table > thead > tr > th {
  background: rgba(255, 255, 255, 0.6);
  color: #222;
  border: 0px;
}

.table td {
  background: #2B3241; /* rgba(10, 10, 10, 0.6); */
  color: #fff;
}

.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_processing,
.dataTables_wrapper .dataTables_paginate {
  color: #fff;
}

.table tbody {
    height: 100px;       /* Just for the demo          */
    overflow-y: auto;    /* Trigger vertical scroll    */
    overflow-x: hidden;  /* Hide the horizontal scroll */
}

.flex-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  align-content: space-around;
}

.flex-item {
  min-width: 25%;
  min-height: 150px;
  color: #fff;
  margin-left: 6%;
  margin-top: 10px;
  margin-bottom: 20px;
  background: #757575;
  cursor: pointer;
  text-align: center;
  font-size: 1.8rem;
  flex: 0 0 30rem;
  -webkit-box-shadow: -7px 11px 25px -9px rgba(0,0,0,1);
  -moz-box-shadow: -7px 11px 25px -9px rgba(0,0,0,1);
  box-shadow: -7px 11px 25px -9px rgba(0,0,0,1);
}

.flex-item p {
  padding: 34px;
  color: #fff;
}

.dynatable-active-page {
  background: rgba(10, 10, 10, 0.6);
  color: #fff;
  border: 0px;
  border-radius: 0px;
}

a, a:hover, a:focus {
  color: #fff;
  cursor: pointer;
}

.dynatable-pagination-links span {
  display: none;
}

.state-click, .district-click, .subdistrict-click {
  cursor: pointer;
}


.tooltip-well {
  background: rgba(10, 10, 10, 0.4);
  color: #fff;
  /*padding: 10px;*/
  margin-right: 10px;
}
.tootlip-value {
  padding-right: 4px;
  padding-left: 4px;
}
.customTooltip {
  margin-top: -2px;
}

.disabled {
  pointer-events: none;
}

#metrics_list{
  margin-top: 3%;
}