/* Default to light theme 
body {
background-color: #ffffff;
color: #000000;
}*/
.infobox {
background-color: black;
padding: 5vh 1vw;
border-style: dashed;
margin-bottom: 1vh;
border-width: thin;
	}
	.device-ithem {
		float: left;
		width: auto;
		padding-left: 4vw;
		padding-right: 4vw;
		height: 20vh;
		text-align: center;
		align-content: center;
		margin-bottom: 1vh;
		border-width: medium;
		border-radius: 8px;
		background-color: black;
		margin-right: 1vw;
	}
	.device-ithem:hover {
		background-color:#198754;
		cursor:pointer;
	}
	#add-to-list {
		margin-left:5px;
	}
	/* Apply dark mode styles if the user has a dark system theme */
	@media (prefers-color-scheme: dark) {
		body {
			background-color: #212529; /* Bootstrap's dark background color */
			color: #ffffff;
		}
		.modal-content {
			background-color: #212529; /* Bootstrap's dark background color */
			color: #ffffff;
		}

		#inputUrl {
			border:none;
			background-color: #212529;
			color: #ffffff;
		}
		.btn {
			color: #ffffff;
		}
		.list-group-item {
			border-style: solid;
			background-color: #212529;
			color: #ffffff;
		}
		.li-link {
			text-decoration: none; /* Removes the underline */
			color:#fff !important;
			text-overflow: ellipsis;
			white-space: nowrap; 
			overflow: hidden;
			width:100%;
		}
		.li-link:hover {
			text-decoration: underline;
		}
		.li-note {
			background-color: #fff !important;
			color: #000 !important;
			border-radius: 0px 10px 10px 0px;
			border-style:none !important;
			color:#fff !important;
			background-color:#212529 !important;
			margin-right:28px;
		}
	}
	#inputUrl {
		background:#fff;
		color:#000;
		margin-right:20px;
	}
	#logo-text {
		cursor:pointer;
	}
	.li-link {
		color:#A9A;
		text-overflow:ellipsis;
		white-space:nowrap;
		overflow:hidden;
		width:100%;
	}
	.li-link-r {
		padding-right: 3vw;
		color: #A9A;
		font-size: 12px;
		text-overflow: ellipsis;
		overflow: hidden;
	}
	.li-note {
		border-style: none solid none solid;
		color: #A9A;
		background-color: whitesmoke;
		padding: 2vw 5vh;
		margin-right: 1vw;
		width:100%;
		text-overflow:ellipsis;
		/*white-space:nowrap;*/
		overflow:hidden;
		background-color: #fff !important;
		color: #000 !important;
		border-radius: 0px 10px 10px 0px;
		margin-right:28px;
		margin-left:-1vw;
	}
	/* Styling to make the alert appear as a centered popup */
	.popup-alert {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 1050; /* Higher than most elements */
		width: 300px;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
	}
	.popup-backdrop {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
		z-index: 1040; /* Slightly below the popup */
	}
	.small-pdf-icon {
		height: 45px;
		padding-right: 10px;
	}