:root {
--color-primary-100: #a30808;
--color-primary-200: #b23522;
--color-primary-300: #bf513a;
--color-primary-400: #cc6a54;
--color-primary-500: #d7836e;
--color-primary-600: #e29c8a;
/** CSS DARK THEME SURFACE COLORS */
--color-surface-100: #121212;
--color-surface-200: #282828;
--color-surface-300: #3f3f3f;
--color-surface-400: #575757;
--color-surface-500: #717171;
--color-surface-600: #8b8b8b;
/** CSS DARK THEME MIXED SURFACE COLORS */
--color-surface-mixed-100: #211512;
--color-surface-mixed-200: #362a28;
--color-surface-mixed-300: #4c413f;
--color-surface-mixed-400: #635957;
--color-surface-mixed-500: #7b7371;
--color-surface-mixed-600: #948d8b;

}

.subtable tbody tr:nth-child(even) {
    background: var(--color-surface-200);  
}

.subtable tbody tr:nth-child(odd) {
    background: var(--color-surface-300);  
}

#html5-qrcode-button-camera-permission,
#html5-qrcode-button-camera-stop,
#html5-qrcode-button-camera-start {
	margin: 4px;
	color: white;
	background: var(--color-surface-mixed-300);
}

#header {
	display: block;
	width:100%;
	padding: 5px;
}

#scan_button {
	margin-left: auto;
	margin-right: 10%;
	float: right;
	color: white;
	background-color: var(--color-primary-200); 
	width: 200px;
}


#sidebar.inactive {
	height: 0;
	width: 0;
	visibility: hidden;
}

#sidebar.is-active {
	height: 100%;
	width:  300px;
	position: fixed;
	z-index: 1;
	top: 0;
	background: var(--color-primary-200);
}

.pin {
	width: 100px;
	height: 100px;
	font-size: 36px;
}

.pinpass {
	font-size: 36px;
}

.numpad{
	width: 324px;
}

/* Custom Styles for Status Indicators */
.status-indicator {
    width: 15px; /* Diameter of the circle */
    height: 15px; /* Diameter of the circle */
    border-radius: 50%; /* Makes it a circle */
    margin-left: 10px; /* Space from the device name */
    display: inline-block; /* Ensures it sits next to the name */
    border: 1px solid rgba(0, 0, 0, 0.2); /* Subtle border for definition */
    vertical-align: middle; 
}

.status-online {
    background-color: #28a745; /* Bootstrap Green */
}

.status-offline {
    background-color: #dc3545; /* Bootstrap Red */
}

.status-loading {
    background-color: #6c757d; /* Bootstrap Grey */
    animation: pulse 1.5s infinite ease-in-out; /* Add a subtle pulse effect */
}

.rlb {
  margin: 10px;
  padding: 20px;
  border: 1px solid rgb(163, 8, 8); /* 1px thick, solid line, specified color */
  border-radius: 12px; /* Adjust this value for desired roundness */
}

#content {
	padding: 5px;
}

body {
	background: var(--color-surface-100);
}

.shaking-div {
  animation-iteration-count: 2;
  animation: shake .5s;
}

@keyframes shake {
  0% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-10px);
  }
  50% {
    transform: translateX(10px);
  }
  75% {
    transform: translateX(-5px);
  }
  100% {
    transform: translateX(0);
  }
}