@font-face {
		font-family: "RobotoMono";
		src: url('/res/RobotoMono-VariableFont_wght.ttf');
}

.rotate-90 {
	rotate: 90deg;
}
#active { color: red; }

.red { color: #FF4444; }
.margin-small {
	margin: 5px !important;
}

.underline {
	text-decoration: underline;
}
.width-500px {
	width: 500px
}

.fullwidth {
	width: 100%;

}
.left-30px {
	margin-left: 30px;
}
.align-flex-end {
	align-items: flex-end !important;
}

.justify-flex-start {
	justify-content: flex-start !important;
}


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

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

.item img {
	width: 120px;
	height: fit-content;
}
.item_info {
	text-align: center;
	font-size: smaller;
	margin: 10px;
}
.item_details {
	font-size: smaller;
	margin: 10px 20px;
	width: 100%;
}

.item_options {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.item_buttons {
	diplay: flex;
}

.item, #clients table, #alarms table {
	padding: 10px;
	border-radius: 5px;
	border: #DDD solid 1px;
	margin: 10px 0px;
}

.item {
	display: flex;
	align-items: flex-start;
}
.bigicon {
	transform: scale(2,2);
	padding: 25px;
}

.bigicon-nopadding {
	transform: scale(2,2);
	padding: 10px;
}
.status {
	padding: 6px 8px 3px 8px;
	border-radius: 3px;
	font-size: smaller;
	white-space: nowrap;
	cursor: default;
	font-weight: bold;
}

.statushol {
	border-style: solid;
	border-width: 3px;
	background-color: white;
	padding: 2px 14px 0px 4px;
	border-radius: 3px;
	font-size: small;
	white-space: nowrap;
	cursor: default;
}

.status.connected, .status.ACTIEF {
	background-color: lightgreen;
}
.statushol.connected, .statushol.ACTIEF {
	border-color: lightgreen;
}
.status.offline, .status.INACTIEF {
	background-color: pink;
}

.details_container {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
}
.details_container p {
	min-width: 30%;	
}

#clients, #alarms {
	font-size: smaller;
}
.centered {
	text-align: center;
}
.right {
	text-align: right;
}
.float-left {
	float: left;
}
.float-right {
	float: right;
}

input:disabled {
	background-color: #ddd;

}
.uppercase {
	text-transform: uppercase;
}

.monospace {
	font-family: 'RobotoMono';
	font-size: smaller;
	padding: 2px 7px;
	background-color: #333;
	color: white;
	font-weight: bold;
	border-radius: 3px;
	cursor: pointer;
}
.netwerk-table {
	display: none;
	margin: 10px 0px;
}

.wifi-details-velden {
		display: flex;
		align-items: center;
		width: fit-content;
}
.wifi-details-velden img {
		float: left;
		margin: 20px;
}



.small-button {
	font-size: small;
	padding: 8px 10px;
	margin: 0px 5px;
	border-radius: 3em;
}

.small-button.margin {
	margin: 20px 0px 0px 0px;
	border-radius: 5px;
	letter-spacing: 1.5px;
}

.small-button.nomargin {
	border-radius: 5px;
	letter-spacing: 1.5px;
}

.small-button.margin-round {
	margin: 20px 5px 20px 5px;
	border-radius: 5px;
	letter-spacing: 1px;
}
.small-button.margin-round-ex-left {
	margin: 20px 5px 20px 0px;
	border-radius: 5px;
	letter-spacing: 1px;
}

.small-button.yellow {
	background-color: #ffbe56;
	border-color: #ffbe56;
}
.small-button.yellow:hover, .small-button.yellow:focus {
	color: #ffbe56;
	background-color: white;
	border-color: #ffbe56;
}

.small-button.red {
	color: white;
	background-color: #ff4444;
	border-color: #ff4444;
}
.small-button.red:hover, .small-button.red:focus {
	color: #ff4444;
	background-color: white;
	border-color: #ff4444;
}

.small-button-text {
	font-size: small;
	padding: 8px 15px;
	margin: 0px 5px;
	border-radius: 4px;
	letter-spacing: 1px;
}

.small-button.tegel {
	width: 24%;
	height: 100px;
}

.small-button.disabled {
	color: #999 !important;
	background-color: #333 !important;
	border-color: #999 !important;
}

button.tegel.border-red {
	border: 2px #F22 solid !important;
}

.mailboxinput {
	padding: 2px 5px !important;
	font-size: small !important;
	margin: 0px 5px;
	border-radius: 3px;
}


.svg-inline--fa {
margin: 0px 4px;
width: 17px;
}

.wifi-netwerk, .omlijning {
padding: 20px;
border-radius: 5px;
border: #DDD solid 1px;
margin: 20px 0px;
}

.omlijning.small-padding {
	padding: 3px 10px;
}

.hidden {
	display: none;
	}

table {
	font-size: 0.9em;
}
td.fitwidth {
	width: 1px;
	white-space: nowrap;
}
th {
  background-color: #333;
  color: white;
}

.wrap {
		word-wrap: anywhere;
}

.mailadres {
	width: 40%;
}

.klikbaar {
		cursor: pointer;
}


.small-text {
	font-size: small;
	font-family: monospace;
	background-color: rgba(0.1,0.1,0.1,0.1);
	padding: 5px 15px;
	width: fit-content;
}

.intertitel {
	margin-top: 1em !important;
	font-size: larger !important;
	text-align: center;
	padding: 20px;
	background-color: #333;
	color: white !important;
	border-radius: 5px;
}

.popup-body p {
	font-size: medium;
}
.popup-title {
	font-size: x-large;
}
@media only screen and (max-width: 800px) {
    .details_container, .item_options{
		flex-flow: column;
	}

	table th {
    display: none;
  }  table td {
    display: flex;
  }


  table td::before {
    content: attr(label);
    font-weight: bold;
    width: 120px;
    min-width: 120px;
  }

	.wifi-chart {
			display: none;
	}
	.small-button.tegel {
		width: 95%;

	}
	.wifi-details, .wifi-details-velden {
		display: block;
		width: unset;
	}

	.item {
		display: flex;
		align-items: center;
		flex-flow: column;
	}

}