#msm-modal{
	position	:	fixed;
	inset		:	0;
	display		:	none;
	z-index		:	99999;
	font-family	:	var(--font-site);
}
#msm-modal.open{
	display		:	block
}
#msm-modal .msm-backdrop{
	position	:	absolute;
	inset		:	0;
	background	:	rgba(0,0,0,.45)
}
#msm-modal .msm-dialog{
	position		:	absolute;
	top				:	6%;
	left			:	50%;
	transform		:	translateX(-50%);
	width			:	min(800px,80vw);
	background		:	#fff;
	border-radius	:	12px;
	box-shadow		:	0 30px 60px rgba(0,0,0,.35);
	padding			:	12px
}
#msm-modal .msm-viewport{
	display			:	flex;
	align-items		:	center;
	justify-content	:	center;
	height			:	min(80vh,760px)
}

#msm-modal img{
	max-width	:	100%;
	max-height	:	100%;
	display		:	block
}

#msm-modal .msm-actions{display:flex;
	gap				:	12px;
	justify-content	:	center;
	align-items		:	center;
	padding			:	6px
}


#msm-modal .msm-count{
	min-width	:	80px;
	text-align	:	center
}

#msm-modal .msm-prev{
	left		:	30px;
	top			:	50%;
	transform	:	translateY(-50%);
}
#msm-modal .msm-next{
	right		:	30px;
	top			:	50%;
	transform	:	translateY(-50%);
}

/* Close (X) top-right over the image */
#msm-modal .msm-close, #msm-modal .modal-header .close, #msm-modal .btn-close, #msm-modal button[aria-label="Close"]{
	top				:	12px;
	right			:	30px;
	z-index			:	10060;
	position		:	absolute;
}



#msm-modal .modal-dialog{
	max-width:96vw;
	margin:2vh auto !important;
	}
	
#disclaimerMessage{
	width				:	400px;
	height				:	auto;
	background-color	:	rgba(0,0,0,.5);
	position			:	absolute;
	z-index				:	1000;
	font-size			:	12px;	
	top					:	0px;
	color				:	#cccccc;
	padding				:	12px;
	border-radius		:	0px 0px 12px 12px;
	left				:	50%;
	transform			:	translateX(-50%);
}

#msm-modal .modal-content, #msm-modal .modal-body,
#msm-modal .msm-dialog, #msm-modal .msm-content, #msm-modal .msm-stage{
	background		:	transparent !important;
	border			:	0 !important;
	border-radius	:	0 !important;
	box-shadow		:	none !important;
	padding			:	0 !important;
}

#msm-modal .msm-dialog{
	position		:	relative;
	display			:	flex;
	align-items		:	center;
	justify-content	:	center;
	background-color:	black !important;
	border-radius	:	12px !important;
	box-shadow		:	5px 5px 8px rgba(0, 0, 0, 0.5) !important;
	}

/* Square viewport; black background becomes the letterbox bars */
#msm-modal .msm-viewport{
	position		:	relative;
	width			:	min(80vw, 80vh);
	height			:	min(80vw, 80vh);
	display			:	flex;
	align-items		:	center;
	justify-content	:	center;
	background		:	#000 !important;
	padding			:	0 !important;
}
/* Proportional fit with no cropping; center it */
#msm-modal .msm-viewport img.msm-photo{
	width			:	100% !important;
	height			:	100% !important;
	object-fit		:	contain !important;
	object-position	:	center center !important;
	display			:	block;
	border			:	0;
	background		:	transparent;
}

#msm-modal .msm-actions{
	background	:	transparent !important;
	border		:	0 !important;
	box-shadow	:	none !important;
	padding		:	0 !important;
}

#msm-modal .msm-prev:hover, #msm-modal .msm-next:hover, #msm-modal .msm-close:hover{
	background	:	rgba(0,0,0,.65);
}

/* Index: bottom-center a bit lower */
#msm-modal .msm-count{
	position		:	absolute !important;
	left			:	50%;
	bottom			:	6px !important;
	top				:	auto !important;
	transform		:	translateX(-50%);
	z-index			:	10040;
	color			:	#fff;
	font-size		:	13px;
	background		:	rgba(0,0,0,.5);
	padding			:	4px 10px;
	border-radius	:	12px;
	text-shadow		:	0 1px 2px rgba(0,0,0,.5);
	width			:	50px;
}

#msm-modal .msm-prev, #msm-modal .msm-next, #msm-modal .msm-close{
  display: inline-flex;       /* inline-flex is fine; flex also OK */
  align-items: center;
  justify-content: center;
  padding-bottom: 10px;                 /* kill default button padding */
  margin: 0;
  box-sizing: border-box;
  border: 0;                  /* or 1px solid #aaa if you want a ring */
  width: 50px;
  height: 50px;
  line-height: 1;             /* <-- key: don't use 52px */
  font-size: 34px;            /* adjust as desired */
  background: rgba(0,0,0,.5);
  color: #fff;
  border-radius: 12px;
  user-select: none;
  cursor: pointer;
}