:root {
  --loctec-bg-color: var(--bs-gray-400);
  --loctec-default-datatables-width: 100%;
  --mynewcolor:#77cccc;
}

.loctec-bg {
  background-color: var(--loctec-bg-color) !important; }

.navbar-light {
  background-color: var(--loctec-bg-color) !important;
  box-shadow: none;
}

.footer .footer-logo {
  max-width: 5rem;
}

.client_banner {
  width: 40%;
  height: auto;
  float: left;
}

@media (min-width: 1600px) {
  .client_banner {
    width: 10%;
    height: auto;
    float: left;
  }
  .client_banner img {
    width: 250px !important;
    height: auto;
  }
}

.phonecol {
  color: #57BB9F;
}

.emailcol {
  color: #E7527F;
}

.cardcol {
  color: #1484d8;
}

.basicinfo {
  margin: 10px 0;
}

.basicinfo .btn {
  padding-left: 10px;
  padding-right: 10px;
}

.profile-picture {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 150px;
  max-width: 50%;
  padding-top: 20px;
  padding-bottom: 20px;
}

.profile-name {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  color: white;
  padding-bottom: 10px;
  font-weight: bold;
}

.email-icon {
  float: left;
  width: 50%;
  padding: 30px 20px;
  text-align: center;
}

.phone-icon {
  float: left;
  width: 50%;
  padding: 30px 20px;
  text-align: center;
}

.email-icon i, .phone-icon i {
  display: block;
  font-size: 16px;
  margin-bottom: 15px;
}

.email-icon a, .phone-icon a {
  color: #000;
}

.email-icon a:hover, .phone-icon a:hover {
  text-decoration: none
}

.contact-method i {
  margin-right: 5px;
}

.btn-remove {
  background-color: #E7527F;
  border-color: #E7527F;
  color: #fff;
}

.btn-emergency {
  color: whitesmoke;
}

.btn-export {
  background-color: #E7527F;
  border-color: #E7527F;
  color: #fff;
  float: right;
  margin-right: 12px;
  margin-bottom: 10px;
}

.btn-update {
  background-color: #81CCB7;
  border-color: #81CCB7;
  color: #fff;
}

.btnhyper {
  background-color: #3C8CBC;
  border-color: #3C8CBC;
  color: #fff;
}

.btnpend {
  background-color: #cccccc;
  border-color: #ffffff;
  color: #cccccc;
}

.btnpend:hover {
  border-color: #000000;
}

.user-info-hdr {
  color: whitesmoke !important;
  background-color: #3C8CBC !important;
  width: 200px;
}

.btn-update {
  background-color: #81CCB7;
  border-color: #81CCB7;
  color: #fff;
}

.btn-export {
  background-color: #E7527F;
  border-color: #E7527F;
  color: #fff;
  float: right;
  margin-right: 12px;
  margin-bottom: 10px;
}

.btn-emergency {
  color: whitesmoke;
}

.btnhyper {
  background-color: #3C8CBC;
  border-color: #3C8CBC;
  color: #fff;
}

.btnpend {
  background-color: #cccccc;
  border-color: #ffffff;
  color: #cccccc;
}

.btnpend:hover {
  border-color: #000000;
}

table.dataTable th {
  background-color: grey;
  color: white;
  border-bottom-color: #3680ab;
  font-weight: 400;
}

th.sorting {
  background-color: grey;
  color: white;
  border-bottom-color: #3680ab;
  font-weight: 400;
}

th.sorting_disabled {
  background-color: grey;
  color: white;
  border-bottom-color: #3680ab;
  font-weight: 400;
}

th.select-checkbox, th.select-checkbox.sorting_disabled, th.select-checkbox.sorting_disabled.dtfc-fixed-left {
  background-color: grey;
  color: white;
  border-bottom-color: #3680ab;
  font-weight: 400;
}


.section-heading-info-hdr {
  display: flex;
  align-items: center;
  justify-content: left;
}

#clearSearch {
  position: absolute;
  z-index: 99;
  right: 50px;
  /* top :5px; */
  opacity: 1;
  font-size: 37px;
}

#vienna {
  text-decoration: none;
  color: white;
  font-size: 11pt;
  font-weight: bold;
  text-shadow: black 0.1em 0.1em 0.2em;
}

.loader {
  float: right;
  position: relative;
  z-index: 2;
  color: #3C8BBC;
  margin-right: 41px;
  margin-top: -37px;
}

.map {
  width: 100%;
  height: 723px;
}

#map {
  background: white;
}

.svg-layer path:hover {
  opacity: 0.4;
}

.email_send_loader {
  color: #ffffff;
}

.reportRow {
  display: flex; /* equal height of the children */
}

.reportCol {
  flex: 1; /* additionally, equal width */
  padding: 1em;
  border: solid;
}

.badge__ {
  width: 10px;
  height: 0;
  box-sizing: content-box;
  padding-top: 10px;
  position: relative;
  color: white;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-align: center;
  text-transform: uppercase;
}

.badge__:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 0;
  border-bottom: 3px solid #eee;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
}

#dataTable_filter, #dataTable1_filter, #dataTable2_filter {
  float: right;
}

#marker {
  width: 100px;
  height: 100px;
  border: 1px solid #72AFD2;
  border-radius: 50px;
  background-color: #72AFD2;
  opacity: 0.5;
}

.btn-emergency-new, .card-emergency-new, .btn-emergency-acknowledge {
  color: #fff;
  background-color: #ffc107;
  border-color: #ffc107;
  border-radius: 0.3rem !important;
}

.btn-emergency-new:hover, .btn-emergency-acknowledge:hover {
  color: #fff;
  background-color: #ffca2c;
  border-color: #ffc720;
  border-radius: 0.3rem !important;
}

.btn-emergency-active, .card-emergency-active, .btn-emergency-clear {
  color: #fff;
  background-color: #dc3545;
  border-color: #dc3545;
  border-radius: 0.3rem !important;
}

.btn-emergency-active:hover, .btn-emergency-clear:hover {
  color: #fff;
  background-color: #bb2d3b;
  border-color: #b02a37;
  border-radius: 0.3rem !important;
}

.btn-emergency-closed, .card-emergency-closed {
  color: #fff;
  background-color: #198754;
  border-color: #198754;
  border-radius: 0.3rem !important;
}

.btn-emergency-closed:hover {
  color: #fff;
  background-color: #157347;
  border-color: #146c43;
  border-radius: 0.3rem !important;
}

/*
  Auditable Record Buttons:
  btn-ar-open
  btn-ar-closed
  btn-ar-ack-pending
 */

/*
btn-lbe-user-name
btn-lbe-user-alias
btn-lbe-device-alias
 */

.btn-lbe-user-name, .btn-lbe-user-alias, .btn-lbe-device-alias {
  color: #fff;
  background-color: #0d6efd;
  border-color: #0d6efd;
  border-radius: 0.3rem !important;
}

.btn-lbe-user-name:hover, .btn-lbe-user-alias:hover, .btn-lbe-device-alias:hover {
  color: #fff;
  background-color: #0b5ed7;
  border-color: #0a58ca;
  border-radius: 0.3rem !important;
}

.btn-lbe-edit-tags {
  color: #000000;
  background-color: rgb(255, 214, 113);
  border-color: rgb(255, 214, 113);
  border-radius: 0.3rem !important;
}

.btn-lbe-edit-tags:hover {
  color: #000000;
  background-color: rgb(255, 206, 59);
  border-color: rgb(255, 214, 113);
  border-radius: 0.3rem !important;
}

.btn-vbatt-chart {
  color: #000000;
  background-color: rgb(178, 178, 178);
  border-color: rgba(252, 210, 50, 0.25);
  border-radius: 0.3rem !important;
}

.btn-vbatt-chart:hover {
  color: #000000;
  background-color: rgb(164, 164, 164);
  border-color: rgba(252, 210, 50, 0.25);
  border-radius: 0.3rem !important;
}

/* a 3c8dbc;
--bs-gray-600: #6c757d;
--bs-gray-700: #495057;
--bs-gray-800: #343a40;
*/

.btn-change-op-state {
  color: whitesmoke;
  background-color: var(--bs-gray-600);
  border-color: var(--bs-gray-800);
  border-radius: 0.3rem !important;

}

.btn-change-op-state:hover {
  color: whitesmoke;
  background-color: var(--bs-gray-700);
  border-color: var(--bs-gray-800);
  border-radius: 0.3rem !important;

}

.btn-change-op-state-in-test {
  color: whitesmoke;
  background-color: rgb(255, 0, 0, 1.0); /* rgb(255, 0, 0, 1.0)  */
  border-color: rgb(200, 0, 0, 1.0);
  border-radius: 0.3rem !important;

}

.btn-change-op-state-in-test:hover {
  color: whitesmoke;
  background-color: rgb(223, 0, 0, 1.0);
  border-color: rgb(200, 0, 0, 1.0);
  border-radius: 0.3rem !important;

}

.btn-change-op-state-normal {
  color: whitesmoke;
  background-color: rgb(60, 141, 188, 1.0);
  border-color: rgb(32, 131, 189);
  border-radius: 0.3rem !important;
}

.btn-change-op-state-normal:hover {
  color: whitesmoke;
  background-color: rgb(114, 175, 210, 1.0);
  border-color: rgb(32, 131, 189);
  border-radius: 0.3rem !important;
}

a {
  color: rgb(60, 141, 188, 1.0); /* */
}
a:hover,
a:active,
a:focus {
  outline: none;
  text-decoration: none;
  color: rgb(114, 175, 210, 1.0); /* rgb(114, 175, 210, 1.0)*/
}

a.op-state-link-normal {
  color: rgb(60, 141, 188, 1.0); /* */
}

a.op-state-link-normal:hover,
a.op-state-link-normal:active,
a.op-state-link-normal:focus {
  outline: none;
  text-decoration: none;
  color: rgb(114, 175, 210, 1.0);
}

a.op-state-link-in-test {
  color: rgb(255, 0, 0, 1.0);
}

a.op-state-link-in-test:hover,
a.op-state-link-in-test:active,
a.op-state-link-in-test:focus {
  outline: none;
  text-decoration: none;
  color: rgb(223, 0, 0, 1.0);
}

/* Working around issues with select2 4.1.0.rc.0 interaction with bootstrap 5.1.X */
.select2-close-mask {
  z-index: 2099;
}

.select2-dropdown {
  z-index: 3051;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
  color: #FFFFFF; /* var(--bs-gray-dark); */
  background-color: #3c8dbc; /* var(--bs-primary);  var(--bs-body-color); */
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  color: black;
}

button.select2-selection__clear {
  visibility: hidden;
}

.select2-selection.select2-selection--multiple.select2-selection--clearable {
  /* visibility: hidden; */

}

.user-datatables-list, .device-datatables-list, emergency-datatables-list {
  width: 100%;
}