html {
  background-color: #f7f8fa;
}

html, body {
  height: 100%; /* Ensures html and body take up full screen height */
  margin: 0;
}

body {
  display: flex;
  flex-direction: column; /* Stacks children vertically */
  min-height: 100vh; /* Ensures body is at least full viewport height */
}

main {
  flex: 1; /* Allows main content to grow and fill the remaining space */
}

.auth-status {
  position: fixed;
  top: 0;
  right: 0;

  z-index: 1000;

  background: rgba(0, 0, 0, 0.6);
  color: white;

  padding: 0.5rem 0.75rem;
  font-size: 0.85rem;
  border-bottom-left-radius: 6px;
}

var {
	font-family:monospace;
	font-style:normal;
	color:  #5d5d62;
}

.value {
	font-family:monospace;
	font-style:normal;
	font-weight:bold;
}

.summary-top {
	margin:10px;
	font-weight:lighter;
}

.summary-details {
	
}


.card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  margin: 2em;
  padding: 1em;
  background-color: #ffffff;
  background-clip: border-box;
  border: 1px solid rgba(0, 0, 0, 0.125);
  border-radius: 0.375rem;
}

.photograph {
	width: 20em;
	border: 1px solid #000;
	box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.device {
	margin: 2em;
	width: 30em;
	background-color: #fff;
	padding:20px;
	border-radius: 14px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.06);
	overflow:hidden;
}

.device_image {
  width: 320px;
  height:240px;
}

.device_state {
	overflow-y:scroll;
}

.state-list {
  list-style-type: none;
}

.placeholder {
  font-weight:200;
}

.container { display:flex; }

#map { height: 180px; width: 360px;}

* {
    font-family: "Inter", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}