/* Aangepaste stijlen */
body {
    background-color: #f7f7f7;
}

.container {
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
}

input[type="text"],
input[type="password"],
.form-control {
    border-radius: 0.25rem;
}

.device-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); /* Pas het aantal kolommen aan op basis van de beschikbare ruimte */
    grid-gap: 20px; /* Ruimte tussen de apparaten */
}

.device {
    background-color: #ffffff;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	text-align: center; /* Centreer de tekst binnen elk apparaat */
    width: 160px; /* Vaste breedte */
    height: 75px; /* Vaste hoogte */
    margin: 10px; /* Buitenmarge */
	position:relative;
}
.device .name {
	font-size: 16px;
	height:24px;
    overflow: hidden;
    white-space: nowrap;
}

INPUT[type="text"].edit-name-field {
	width:110px;
	left:40px;
	position:absolute;
	line-height: 18px;
}

.uuid {
    font-size: 8px;
	display:inline-block;
}

/* CSS voor gegroepeerde apparaten */
.group-container {
    border: 2px solid green; /* Kies de gewenste kleur voor de rand */
	border-radius: 5px;
	width: 185px;
}


/* Voeg stijlen toe voor de geselecteerde devices */
.device.selected {
    border: 2px solid #007bff; /* Voeg een blauwe rand toe aan geselecteerde devices */
}

.device .fas {
	float:left;
}


.remove-icon {
    top: 2px;
    right: 2px;
    color: red;
    font-size: 16px;
    cursor: pointer;
	position:absolute;
}

.remove-icon:hover {
    font-weight: bold;
}
.master-icon {
	position: absolute;
	top: 2px;
	left: 15px;
	font-size:10px;
	color:gold;
}
.status-icon {
	position: absolute;
	top: 2px;
	left: 3px;
	font-size:10px;
}

.btn-primary {
    background-color: #007bff;
    border: none;
    border-radius: 5px;
}

.btn-primary:hover {
    background-color: #0056b3;
}

.btn-details {
	position: absolute;
	top: 2px;
	left: 30px;
	width: 32px;
	height: 10px;
	color:white;
	font-size:8px;
	padding:0;
	line-height:8px;
}

#html5-qrcode-button-camera-stop,
#html5-qrcode-button-camera-start,
#html5-qrcode-button-file-selection {
    color: #fff;
    background-color: #007bff;
    border-color: #007bff;
	border-radius: 0.25rem; /* Standaard border-radius voor Bootstrap 5 knoppen */
	margin-top:5px;
}

#html5-qrcode-button-camera-stop:hover,
#html5-qrcode-button-camera-start:hover,
#html5-qrcode-button-file-selection:hover {
    color: #fff;
    background-color: #0069d9;
    border-color: #0062cc;
}

#html5-qrcode-button-camera-stop:focus,
#html5-qrcode-button-camera-stop.focus,
#html5-qrcode-button-camera-start:focus,
#html5-qrcode-button-camera-start.focus,
#html5-qrcode-button-file-selection:focus,
#html5-qrcode-button-file-selection.focus {
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
}

#html5-qrcode-button-camera-stop.disabled,
#html5-qrcode-button-camera-stop:disabled,
#html5-qrcode-button-camera-start.disabled,
#html5-qrcode-button-camera-start:disabled,
#html5-qrcode-button-file-selection.disabled,
#html5-qrcode-button-file-selection:disabled  {
    background-color: #007bff;
    border-color: #007bff;
    opacity: 0.65;
}

/* Hide info icon */
#reader DIV IMG {
	display: none;
}

/* Voeg een klasse toe om het shield-icoon weer te geven */
.shield-icon {
    background-image: url('path/to/shield-icon.png'); /* Voeg het pad naar je shield-icoon toe */
    background-size: cover;
    width: 20px; /* Pas de breedte van het shield-icoon aan */
    height: 20px; /* Pas de hoogte van het shield-icoon aan */
    display: inline-block;
    vertical-align: middle;
}