main {
  transform: translateX(0);
  transition: transform 0.3s;
}
#loadingscreen {
  transition: linear 300ms, opacity 500ms, transform 0.3s;
  transform: translateX(0);
}
#loadingscreen.m-fadeOut {
  visibility: hidden;
  opacity: 0;
}
#loadingscreen.m-fadeIn {
  visibility: visible;
  opacity: 1;
}
.loader-overlay {
	margin: 0px;
	background: radial-gradient(#212529, #000);
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
  z-index: 9999;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
}

/* Custom app.deaonline.eu colors and buttons */

*.disabled, *:disabled {
  cursor: not-allowed;
  pointer-events: all !important;
}

.cursor-pointer {
  cursor: pointer !important;
}

.table-dapp-header, .table-dapp-header td, .table-dapp-header th {
  background-color: #3f485c;
  color: #cbccce;
}

.text-dapp-blue {
  color: rgba(96, 128, 177, 1.0) !important;
}
.text-dapp-light-blue {
  color: rgba(110, 200, 200, 1.0) !important;
}
.text-dapp-violet {
  color: rgba(84, 60, 78, 1.0) !important;
}
.text-dapp-light-violet {
  color: rgba(102, 99, 108, 1.0) !important;
}
.text-dapp-purple {
  color: rgba(224, 101, 108, 1.0) !important;
}
.text-dapp-light-purple {
  color: rgba(228, 114, 106, 1.0) !important;
}

.bg-dapp-blue {
  --bs-bg-opacity: 1;
  background-color: rgba(96, 128, 177, var(--bs-bg-opacity)) !important;
}
.bg-dapp-light-blue {
  --bs-bg-opacity: 1;
  background-color: rgba(110, 200, 200, var(--bs-bg-opacity)) !important;
}
.bg-dapp-violet {
  --bs-bg-opacity: 1;
  background-color: rgba(84, 60, 78, var(--bs-bg-opacity)) !important;
}
.bg-dapp-light-violet {
  --bs-bg-opacity: 1;
  background-color: rgba(102, 99, 108, var(--bs-bg-opacity)) !important;
}
.bg-dapp-purple {
  --bs-bg-opacity: 1;
  background-color: rgba(224, 101, 108, var(--bs-bg-opacity)) !important;
}
.bg-dapp-light-purple {
  --bs-bg-opacity: 1;
  background-color: rgba(228, 114, 106, var(--bs-bg-opacity)) !important;
}

.btn-dapp-blue {
  --bs-btn-color: #fff;
  --bs-btn-bg: #6080b1;
  --bs-btn-border-color: #6080b1;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #5272a8;
  --bs-btn-hover-border-color: #496b9f;
  --bs-btn-focus-shadow-rgb: 66, 98, 153;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #496b9f;
  --bs-btn-active-border-color: #3a5b8d;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #6080b1;
  --bs-btn-disabled-border-color: #6080b1;
}

.btn-dapp-light-blue {
  --bs-btn-color: #fff;
  --bs-btn-bg: #6ec8c8;
  --bs-btn-border-color: #6ec8c8;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #54b3b3;
  --bs-btn-hover-border-color: #40a0a0;
  --bs-btn-focus-shadow-rgb: 66, 194, 175;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #40a0a0;
  --bs-btn-active-border-color: #2aa896;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #6ec8c8;
  --bs-btn-disabled-border-color: #6ec8c8;
}

.btn-dapp-violet {
  --bs-btn-color: #fff;
  --bs-btn-bg: #543c4e;
  --bs-btn-border-color: #543c4e;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #4c2f45;
  --bs-btn-hover-border-color: #45253d;
  --bs-btn-focus-shadow-rgb: 59, 23, 45;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #45253d;
  --bs-btn-active-border-color: #38132a;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #543c4e;
  --bs-btn-disabled-border-color: #543c4e;
}

.btn-dapp-light-violet {
  --bs-btn-color: #fff;
  --bs-btn-bg: #66636c;
  --bs-btn-border-color: #66636c;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #544e61;
  --bs-btn-hover-border-color: #4a405f;
  --bs-btn-focus-shadow-rgb: 67, 60, 82;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #4a405f;
  --bs-btn-active-border-color: #433c52;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #66636c;
  --bs-btn-disabled-border-color: #66636c;
}

.btn-dapp-purple {
  --bs-btn-color: #fff;
  --bs-btn-bg: #e0656c;
  --bs-btn-border-color: #e0656c;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #ce4f56;
  --bs-btn-hover-border-color: #ba434a;
  --bs-btn-focus-shadow-rgb: 168, 42, 59;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #ba434a;
  --bs-btn-active-border-color: #a82a3a;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #e0656c;
  --bs-btn-disabled-border-color: #e0656c;
}

.btn-dapp-light-purple {
  --bs-btn-color: #fff;
  --bs-btn-bg: #e87c69;
  --bs-btn-border-color: #e87c69;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #d96652;
  --bs-btn-hover-border-color: #c95642;
  --bs-btn-focus-shadow-rgb: 186, 70, 50;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #c95642;
  --bs-btn-active-border-color: #ba4632;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #e87c69;
  --bs-btn-disabled-border-color: #e87c69;
}


.btn-dapp-outline-blue {
  --bs-btn-color: #fff;
  --bs-btn-border-color: #6080b1;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #5272a8;
  --bs-btn-hover-border-color: #496b9f;
  --bs-btn-focus-shadow-rgb: 66, 98, 153;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #496b9f;
  --bs-btn-active-border-color: #3a5b8d;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #6080b1;
  --bs-btn-disabled-border-color: #6080b1;
  --bs-gradient: none;
}

.btn-dapp-outline-light-blue {
  --bs-btn-color: #fff;
  --bs-btn-border-color: #6ec8c8;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #54b3b3;
  --bs-btn-hover-border-color: #40a0a0;
  --bs-btn-focus-shadow-rgb: 66, 194, 175;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #40a0a0;
  --bs-btn-active-border-color: #2aa896;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #6ec8c8;
  --bs-btn-disabled-border-color: #6ec8c8;
  --bs-gradient: none;
}

.btn-dapp-outline-violet {
  --bs-btn-color: #fff;
  --bs-btn-border-color: #543c4e;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #4c2f45;
  --bs-btn-hover-border-color: #45253d;
  --bs-btn-focus-shadow-rgb: 59, 23, 45;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #45253d;
  --bs-btn-active-border-color: #38132a;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #543c4e;
  --bs-btn-disabled-border-color: #543c4e;
  --bs-gradient: none;
}

.btn-dapp-outline-light-violet {
  --bs-btn-color: #fff;
  --bs-btn-border-color: #66636c;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #544e61;
  --bs-btn-hover-border-color: #4a405f;
  --bs-btn-focus-shadow-rgb: 67, 60, 82;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #4a405f;
  --bs-btn-active-border-color: #433c52;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #66636c;
  --bs-btn-disabled-border-color: #66636c;
  --bs-gradient: none;
}

.btn-dapp-outline-purple {
  --bs-btn-color: #fff;
  --bs-btn-border-color: #e0656c;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #ce4f56;
  --bs-btn-hover-border-color: #ba434a;
  --bs-btn-focus-shadow-rgb: 168, 42, 59;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #ba434a;
  --bs-btn-active-border-color: #a82a3a;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #e0656c;
  --bs-btn-disabled-border-color: #e0656c;
  --bs-gradient: none;
}

.btn-dapp-outline-light-purple {
  --bs-btn-color: #fff;
  --bs-btn-border-color: #e87c69;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #d96652;
  --bs-btn-hover-border-color: #c95642;
  --bs-btn-focus-shadow-rgb: 186, 70, 50;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #c95642;
  --bs-btn-active-border-color: #ba4632;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #e87c69;
  --bs-btn-disabled-border-color: #e87c69;
  --bs-gradient: none;
}

.animation-glow {
  animation: placeholder-glow 2s ease-in-out infinite;
}

a.list-group-item.list-group-item-action.offcanvas-link-active{
  border-left: 10px solid #e87c69 !important;
  padding-left:7px !important;
}

#battery {
  box-sizing: content-box;
  height: 7.8px;
  width: 17.5px;
  border: 0.6px solid #246aed;
  margin: auto;
  border-radius: 0.6px;
  position: relative;
  display: grid;
  place-items: center;
}
#battery:before {
  position: absolute;
  content: "";
  height: 5px;
  width: 1.1px;
  background-color: #246aed;
  margin: auto;
  top: 0;
  bottom: 0;
  right: -1.6px;
  border-radius: 0 0.3px 0.3px 0;
}
#charge {
  position: absolute;
  height: 6px;
  width: 16.25px;
  background-color: #246aed;
  top: 1.2px;
  left: 0.6px;
}
#charge-level {
  position: absolute;
  font-size: 3px;
  font-weight: 500;
}
#charging-time {
  text-align: center;
  font-size: 1.7px;
  margin-top: 1.4px;
}
.battery-active {
  animation: charge-animation 3s infinite linear;
}

@keyframes charge-animation {
  0% {
    width: 0;
  }
  100% {
    width: 16.25px;
  }
}