/*================================================================================
	Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
	Version: 2.0
	Author: PIXINVENT
	Author URL: http://www.themeforest.net/user/pixinvent
================================================================================

NOTE:
------
PLACE HERE YOUR OWN SCSS CODES AND IF NEEDED, OVERRIDE THE STYLES FROM THE OTHER STYLESHEETS.
WE WILL RELEASE FUTURE UPDATES SO IN ORDER TO NOT OVERWRITE YOUR STYLES IT'S BETTER LIKE THIS.  */
.gradient-modules {
  background-image: linear-gradient(118deg, #002f54, #002f54);
}

.users_datatable .dataTables_scrollBody {
  min-height: 50vh;
}

.dataTables_paginate, .dataTables_info {
  display: flex;
  align-items: center;
  justify-content: center;
}

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

/**
    Meter
*/
.bg-cover, .mask {
  background-size: cover;
}

.z-index-1 {
  z-index: 1 !important;
}

.px-5 {
  padding-right: 3rem !important;
  padding-left: 3rem !important;
}

.text-body {
  color: #67748e !important;
}

.bold {
  font-weight: bold !important;
}

.text-xs {
  font-size: 0.75rem !important;
  line-height: 1.25;
}

.mt-lg-n8 {
  margin-top: -8rem !important;
}

.border-radius-lg {
  border-radius: 0.75rem;
}

.icon-lg {
  width: 64px;
  height: 64px;
}

.transform-2 {
  transform: scale(2);
}

.meters_datatable #inputs_filter {
  float: right;
  margin-right: 1rem;
}

.bg-gradient-primary-2 {
  color: #fff;
  background-repeat: repeat;
  background-image: linear-gradient(310deg, #7928ca, #ff0080);
}

.bg-gradient-primary-2:hover, .bg-gradient-primary-2:active,
.btn-gradient-primary:hover,
.btn-gradient-primary:active {
  color: #fff;
}

.text-center {
  text-align: center !important;
}

.shadow {
  box-shadow: 0 0.3125rem 0.625rem 0 rgba(0, 0, 0, 0.12) !important;
}

.icon {
  fill: currentColor;
  stroke: none;
}

.icon-sm {
  width: 32px;
  height: 32px;
}

#zer_check_charts {
  margin-top: -9.5rem;
}

@media (max-width: 992px) {
  #zer_check_charts {
    margin-top: 0rem;
  }
}
@media (min-width: 992px) {
  .w-lg-100 {
    width: 100% !important;
  }
}
@media (min-width: 768px) {
  .d-md-block {
    display: block !important;
  }
}
.opacity-0 {
  opacity: 0 !important;
}

.opacity-1 {
  opacity: 0.1 !important;
}

.opacity-2 {
  opacity: 0.2 !important;
}

.opacity-3 {
  opacity: 0.3 !important;
}

.opacity-4 {
  opacity: 0.4 !important;
}

.opacity-5 {
  opacity: 0.5 !important;
}

.opacity-6 {
  opacity: 0.6 !important;
}

.opacity-7 {
  opacity: 0.7 !important;
}

.opacity-8 {
  opacity: 0.8 !important;
}

.opacity-9 {
  opacity: 0.9 !important;
}

.opacity-10 {
  opacity: 1 !important;
}

.red {
  color: red;
}

.buttons-group {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
}

@media (min-width: 768px) {
  .col-md-9-5 {
    flex: 0 0 auto;
    width: 79.1666666667%;
  }

  .col-md-8-5 {
    flex: 0 0 auto;
    width: 70.8333333333%;
  }

  .col-md-7-5 {
    flex: 0 0 auto;
    width: 62.5%;
  }

  .col-md-6-5 {
    flex: 0 0 auto;
    width: 54.1666666667%;
  }

  .col-md-5-5 {
    flex: 0 0 auto;
    width: 45.8333333333%;
  }

  .col-md-4-5 {
    flex: 0 0 auto;
    width: 37.5%;
  }

  .col-md-3-5 {
    flex: 0 0 auto;
    width: 29.1666666667%;
  }

  .col-md-2-5 {
    flex: 0 0 auto;
    width: 20.8333333333%;
  }

  .col-md-1-5 {
    flex: 0 0 auto;
    width: 12.5%;
  }

  .col-md-0-5 {
    flex: 0 0 auto;
    width: 4.1666666667%;
  }
}