/* REMOTE_FILENAME=/web/css/JsFormLabelField.css
 *
 *	Copyright © 2026 by FKE Internet.  All rights reserved.
 *
 *	$Id: /web/css/JsFormLabelField.css,v $
 */
/**
*	CSS rulesets for the JavaScript dialog-based Help system
*
*	TODO:
		add list entries here
*
*	Author:			Fred Koschara
*	Creation Date:	June fifth, 2026
*	Last Modified:	June 6, 2026 @ 2:07 pm
*
*	Revision History:
*	   Date		  by		Description
*	2026/06/06	wfredk	original development
*		|		  |				|
*	2026/06/05	wfredk	original development
*/

body.jsHelpLbxOpen,
html.jsHelpLbxOpen
{	height:100%;
	overflow:hidden;
}

.jsHelpSpinnerOverlay
{	background:black url(/graphics/spinner.gif) no-repeat scroll center center;
	display:none;
	height:100dvh;
	left:0;
	position:fixed;
	top:0;
	width:100vw;
	z-index:100;
}

.jsHelpLbxBackgnd
{	align-items:flex-start;
	background:rgba(0,0,0,.55);
	display:none;
	height:100dvh;
	justify-content:center;
	left:0;
	overflow:hidden;
	position:fixed;
	top:0;
	width:100vw;
	z-index:200;
}

.jsHelpLightbox
{	background:#333;
	border:1px solid white;
	box-sizing:border-box;
	display:none;
	flex-direction:column;
	margin:40px auto;
	max-height:calc(100vh - 80px);	/* <- fallback, last valid line wins */
	max-height:calc(100dvh - 80px);	/* valid in newer browsers */
	max-width:40vw;
	overflow:hidden;
	padding:30px 25px 10px;
	position:relative;
	width:min(640px,40vw);
	z-index:250;
}
@media (max-width:640px)
{	.jsHelpLightbox
	{	max-width:80vw;
		width:min(400px,80vw);
	}
}

.jsHelpDialogContent
{	flex:1 1 auto;
	min-height:0;
	overflow:auto;
	overscroll-behavior:contain;
	padding-right:6px;
	-webkit-overflow-scrolling:touch;
}

.jsHelpLbxClose
{	align-items:center;
	appearance:none;
	background:rgba(0,0,0,.4);
	border:1px solid rgba(255,255,255,.25);
	border-radius:8px;
	color:#bae;
	cursor:pointer;
	display:flex;
	font-size:28px;
	font-weight:bold;
	height:40px;
	justify-content:center;
	padding:0;
	position:absolute;
	right:8px;
	top:8px;
	transition:background .15s ease,
			   border-radius .15s ease,
			   transform .1s ease;
	width:40px;
	z-index:500;
}
.jsHelpLbxClose:hover
{	background:rgba(255,255,255,.15);
	border-color:rgba(255,255,255,.6);
	border-radius:12px;
}
.jsHelpLbxClose:focus
{	outline:2px solid yellow;
	outline-offset:2px;
}
.jsHelpLbxClose:active
{	transform:scale(.95);
}

.pageBgLight .jsHelpLbxClose
{	color:#333;
}
.pageBgLight .jsHelpLbxClose:hover
{	color:black;
	background:rgba(0,0,0,.18);
}
.pageBgDark .jsHelpLbxClose
{	color:#ccc;
}
.pageBgDark .jsHelpLbxClose:hover
{	color:white;
	background:rgba(255,255,255,.15);
}

a.jsHelpLink:link,
a.jsHelpLink:visited
{	color:#99f;
	cursor:pointer;
	text-decoration:underline;
}
a.jsHelpLink:hover
{	text-decoration:none;
}
a.jsHelpLink:focus
{	outline:1px dotted white;
	outline-offset:2px;
}

/* EOF: JsFormLabelField.css */