.form-group {
    margin-bottom:1em;
}

.dataTables_length, .dataTables_filter {
    float: left;
}
.dataTables_filter {
    float: right;
    margin-bottom:5px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    border-radius: 4px;;
}
.show-online .offline-circle, .show-offline .online-circle {
  display: none;
}
.online-circle {
  background-color: greenyellow;
}
.offline-circle {
  background-color: #aaa;
}

.level-indicator-wrapper.online .offline-info, .level-indicator-wrapper.offline .level-indicator{
  display: none;
}

.error-offline-content, .error-server-disconnect-content, .progress-loading-content {
  display: none;
}
.error-offline .error-offline-content, .error-server-disconnect .error-server-disconnect-content, .progress-loading .progress-loading-content {
  display: block;
}
#toast-container > .toast.toast-success, #toast-container > .toast.toast-error {
  background-image: none!important;
}
#device-offline-overlay {
  top: 0;
  text-align: center;
  display: block;
  width: 100%;
  background: rgba(255, 255, 255, .8);
  height: 100%;
  padding-top: 25%;
  display: none;
  z-index: 100;
}

#device-details-wrapper.device-staus-offline #device-offline-overlay {
  display: block;
}

#device-offline-overlay span {    
  padding: 10px;
  border: 1px solid;
  text-transform: uppercase;
}
.registration-plate-image {
    max-width:300px;
    max-height:100px;
}
label.error {
  font-size:.9em;
  color:red;
}
.validation-message {
  font-size: .9em;
  color:red;
}

.nav-tabs li {
  background-color: #fff;
  color: #555;
}
.nav-tabs.tab-card .nav-link {
  background-color: #eee;
  color: #999;
}
.nav-tabs.tab-card .nav-link.active {
  background-color: #fff;
}
.tab-content {
  background-color: #fcfcfc;
  padding: 10px;
  /* border-top: 2px solid #7252ff; */
}

/** Water Tank **/
.tank-container {
  width: 100%; /* resize container with CSS */
  height: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.tank-container canvas {
  background: #ffffff;
  width: 100%;
  height: 100%;
  display: block;
} 


/** MAP **/
.map {
  width: 100%;
  height: 80vh; /* 80% of the viewport height */
  border-radius: 0.5rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}
.map .container {
  padding: 1rem;
}
.map .info-card {
  background-color: #fff;
  padding: 1rem;
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  margin-bottom: 1rem;
}
/* Custom styles for the marker labels to stand out */
.map .marker-label {
  font-weight: bold;
  font-size: 14px;
  color: #1a202c; /* Dark text */
  text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8);
  background-color: rgba(255, 255, 255, 0.7);
  padding: 2px 6px;
  border-radius: 4px;
}
.map .gm-style-iw-chr {
  display: none;
}
.map .gm-style-iw-d {
  padding: 14px 10px 2PX;
}
.map .state .online {
  background-color: rgb(143, 248, 143);
  padding: 2px 4px;
}
.map .state .offline {
  background-color: #b9b9b9;
  padding: 2px 4px;
}