@scope (#accesslog-list) {
	a {
		text-decoration: none;
	}

		a:hover {
			text-decoration: underline;
		}

	td {
		vertical-align: middle;
	}

		td select.select-status {
			margin-top: 4px;
			margin-bottom: 4px;
		}

		td div.tick-cross a {
			margin-right: 8px;
		}

			td div.tick-cross a i {
				font-weight: bold;
				text-shadow: 0 0 1px #000, 0 0 1px #000;
			}
}

[data-bs-theme="dark"] #accesslog-list td div.tick-cross a i {
	text-shadow: 0 0 1px #fff, 0 0 1px #fff;
}

.accesslog-detail {
	border: 0;
	table-layout: fixed;
	width: 100%;
}

@scope (.accesslog-detail) {
	tr td:first-child {
	}

		tr td:first-child img {
			max-height: 110px;
			max-width: 112.8px;
		}

	td {
		vertical-align: top;
	}

		td.accesslog-detail-content {
			width: 100%;
			padding-left: 8px;
			border-left: 4px solid lightgray;
		}

			td.accesslog-detail-content img {
				height: 85px;
				width: auto;
				object-fit: contain;
			}

	img {
		border: 1px solid #404040;
	}

		img.cursor-pointer {
			cursor: pointer;
		}

	.access-photo-list-container {
		height: 100%;
	}

	.photo-list {
		display: flex;
		flex-wrap: nowrap;
		gap: 10px;
		overflow: hidden;
		width: 100%;
	}

		.photo-list div {
			flex-shrink: 0;
		}

		.photo-list .photo-item .photo-item-radio {
			text-align: center;
		}
}

/* photo carousel (bootstrap) modal styles (260119) */
#photoCarouselModal .modal-backdrop {
	backdrop-filter: blur(8px);
	background-color: rgba(0, 0, 0, 0.85);
}

#photoCarouselModal .modal-dialog {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: calc(100% - 3.5rem);
}

#photoCarouselModal .modal-content {
	width: fit-content;
	margin: 0 auto;
}

.photo-thumbnail-hover:hover {
	opacity: 0.8;
	transform: scale(1.05);
	transition: all 0.2s ease;
}

/* fixed frame container - 480 x 360 (260119) */
.photo-carousel-frame {
	width: 480px;
	height: 360px;
	position: relative;
	overflow: hidden;
	border: 10px solid #c0c0c0;
	border-radius: 10px;
	box-shadow: 0 0 30px rgba(0,0,0,0.5);
	background-color: #000;
	margin: 0 auto;
}

	/* carousel fills the frame (260119) */
	.photo-carousel-frame #accessPhotoCarousel {
		width: 100%;
		height: 100%;
	}

	.photo-carousel-frame .carousel-inner {
		width: 100%;
		height: 100%;
	}

	.photo-carousel-frame .carousel-item {
		width: 100%;
		height: 100%;
		position: relative;
		transition-duration: 0.3s;
	}
		/* images scaled to 480x360 (260119) */
		.photo-carousel-frame .carousel-item img {
			width: 480px;
			height: 360px;
			object-fit: cover;
			display: block;
		}
	/* timestamp overlay (260119) */
	.photo-carousel-frame .photo-timestamp {
		position: absolute;
		bottom: 20px;
		left: 50%;
		transform: translateX(-50%);
		background: rgba(0,0,0,0.4);
		color: white;
		padding: 5px 10px;
		border-radius: 5px;
		z-index: 10;
		font-size: 12px;
		white-space: nowrap;
		max-width: 90%;
	}
	/* arrow controls within frame (260119) */
	.photo-carousel-frame .carousel-control-prev,
	.photo-carousel-frame .carousel-control-next {
		width: 15%;
		opacity: 0.3;
		transition: opacity 0.3s;
		z-index: 15;
	}

		.photo-carousel-frame .carousel-control-prev:hover,
		.photo-carousel-frame .carousel-control-next:hover {
			opacity: 1;
		}
		/* font awesome arrow icons (260119) */
		.photo-carousel-frame .carousel-control-prev i,
		.photo-carousel-frame .carousel-control-next i {
			background-color: white;
			border-radius: 50%;
			padding: 15px;
			width: 50px;
			height: 50px;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 20px;
			color: #333;
		}
	/* hide the default bootstrap icons (260119) */
	.photo-carousel-frame .carousel-control-prev-icon,
	.photo-carousel-frame .carousel-control-next-icon {
		display: none;
	}