:root {
}

:is(body,th,td) { font-family:  var(--customFont,verdana, sans-serif) }

h2 { font-size: 1rem; }

figure.attImage { margin:0; display: inline-block; max-width: 100%; }
.attImage figcaption { font-size:small; font-style: italic; text-align: center; }
img.attImage { max-width: 100%; }

div.DTplaceholder { border: 1px dashed var(--navbarClr); background-color: var(--bgemClr); opacity: .75; }

fieldset { padding: .5em; }

.emtextLabel			{ text-align: left; padding: 4px; font-weight: bold; font-size: 11pt; }
.emtextLabel.windowshade	{ padding: 0px; border-width: 6px; border-style: solid; }
.emtextLabel.windowshade:hover	{ padding: 0px; border-style: double; background-color: var(--bgemClr); }

.emtextLabel :is(h1,h2,h3,h4,h5,h6) { margin: 0 }

.emtextBody 	{ border: 1px solid var(--bg_textClr); }

.emtextLabel.activity, .emtextLabel.activity ~ * { border-color: var(--activityClr); }

.emtextLabel.announce,	.emtextLabel.announce	~ * { border-color: var(--announceClr); }
.emtextLabel.commtool,	.emtextLabel.commtool	~ * { border-color: var(--commtoolClr); }
.emtextLabel.resource,	.emtextLabel.resource	~ * { border-color: var(--resourceClr); }
.emtextLabel.navbar,	.emtextLabel.navbar	~ * { border-color: var(--navbarClr);   }
.emtextLabel.bg,   	.emtextLabel.bg		~ * { border-color: var(--bgClr);   }

.emtextWindowToggle {	font-size: xx-small; font-weight: 900; font-family: monospace; 
			width: 15px; margin: 0 5px; text-align: center;
		    	background-color: var(--bgemClr); color: var(--bgem_textClr); 
			border: 1px solid var(--bgem_textClr);
			-moz-box-shadow: -1px 1px 1px var(--navbar_darkClr);
			-webkit-box-shadow: -1px 1px 1px var(--navbar_darkClr);
}

/* Legacy junk -- used for the old course navbar */
#id1 { color:var(--textClr); }
#id2 { color:var(--title2Clr); font-Family: book antiqua; text-decoration:none; }


/*-----------------------------
	=LEFT SIDE NAVGATION
-----------------------------*/

#coursenav {
	font-size: 12px;
	width:200px;
	margin:0;
	padding:5px;
	background-color: var(--navbarClr);
	-moz-border-radius-topleft: 5px;
	-webkit-border-top-left-radius: 5px;
	-moz-border-radius-topright: 5px;
	-webkit-border-top-right-radius: 5px;
	-moz-border-radius-bottomleft: 5px;
	-webkit-border-bottom-left-radius: 5px;
	-moz-border-radius-bottomright: 5px;
	-webkit-border-bottom-right-radius: 5px;
	border-radius: 5px;
	background-image: -webkit-gradient(  linear,  left top,  right top,  color-stop(0, var(--navbar_darkClr)),  color-stop(0.75, var(--navbarClr)),  color-stop(1, var(--navbar_lightClr)) );
	background-image: -moz-linear-gradient(  left center,  var(--navbar_darkClr) 0%,  var(--navbarClr) 75%,  var(--navbar_lightClr) 100% );
}

#coursenav_cmds { margin:15px 0; padding:5px;}
#coursenav_cmds li { display: inline; margin:0; padding 0;}

#coursenav_cmdprint a:link,
#coursenav_cmdprint a:visited,
#coursenav_cmdprint a:active,
#coursenav_cmdprint a:hover{
	background-image: url('https://online.uas.alaska.edu/onlinesrc/img/printer-icon32x32.gif');
	background-repeat: no-repeat;
	background-position: left;
	padding: 15px;
	font-size: 0;
}

#coursenav_cmdrss a:link,
#coursenav_cmdrss a:visited,
#coursenav_cmdrss a:active,
#coursenav_cmdrss a:hover {
	background-image: url('https://online.uas.alaska.edu/onlinesrc/img/feed-icon32x32.png');
	background-repeat: no-repeat;
	background-position: left;
	padding: 15px;
	font-size: 0;
	margin-left: 10px;
}

#coursenav_togglelink { background-color: transparent; float: right; text-decoration: none; }

#coursenav h3 { margin: 15px 0 0 0; font-size: 12px;color: var(--navbar_textClr); }
#coursenav_courses li { margin-top: .5em; }
#coursenav_courses ul { list-style-type: square; padding-left: 1em; margin-top: 0em; margin-left: 1em; }
#coursenav_courses a:link:
#coursenav_courses a:visited,
#coursenav_courses a:active { text-decoration: none; }
#coursenav_courses a:hover { text-decoration:underline; }

.navlinks {
	background-image: -webkit-gradient(  linear,  left top,  right top,  color-stop(0, var(--navbar_darkClr)),  color-stop(0.75, var(--navbarClr)),  color-stop(1, var(--navbar_lightClr)) );
	background-image: -moz-linear-gradient(  left center,  var(--navbar_darkClr) 0%,  var(--navbarClr) 75%,  var(--navbar_lightClr) 100% );
}

.navlinks {
	font-size: 14px;
	/*font-family: Arial, Helvetica, sans-serif;*/
	margin:0;
	padding: 0;
	background-color: var(--navbarClr);
}

.navlinks ul {
	margin: 0;
	padding: 0;
}

.navlinks li {
	list-style-type: none;
}

.navlinks ul a:link,
.navlinks ul a:visited,
.navlinks ul a:active {
	color: var(--navbar_textgreyClr);
	display: block;
	padding: 6px 8px 6px 18px;
	text-decoration: none;
	font-variant: small-caps;
	border-bottom: 1px var(--navbar_textgreyClr) solid;
	outline: 0;
	zoom: 1;
}
.navlinks a.tmmlast {
	border-bottom: 0;
}

.navlinks ul ul li {
	padding:0 0 0 1.2em;
	border-bottom: 1px var(--navbar_textgreyClr) dotted;
}

.navlinks ul ul a:link,
.navlinks ul ul a:visited,
.navlinks ul ul a:active {
	font-variant: normal;
	border: 0;
	padding: 3px 8px 3px 18px;
	color: var(--navbar_textgreyClr);
	background-color: transparent !important;
	background-image: none;	
}

.navlinks * a:hover {
	color:var(--navbar_textClr)!important;
	text-shadow: var(--navbar_textshadowClr) 0.1em 0.1em 0.2em;
}


/*-----------------------------
	=MAIN AREA
-----------------------------*/

#pagerender_main {
	margin:0;
	padding:0;
	background: var(--bgemClr);
}

/*-----------------------------
	=HEADER
-----------------------------*/
#pagerender_header {
	background-color: var(--bgClr);
	margin:0;
	padding:0;
}

#pagerender_header a:link,
#pagerender_header a:visited,
#pagerender_header a:active {
	text-decoration:none;
	letter-spacing: 0.75px;
}

#pagerender_header a:hover {
	text-decoration: underline;
}

#pagerender_masthead {
	-moz-border-radius-topleft: 5px;
	-webkit-border-top-left-radius: 5px;
	-moz-border-radius-topright: 5px;
	-webkit-border-top-right-radius: 5px;
	padding:10px;
	background-image: -webkit-gradient(  linear,  right top,  left top,  color-stop(0, var(--navbarClr)),  color-stop(0.75, var(--navbarClr)),  color-stop(1, var(--navbar_lightClr)) );
	background-image: -moz-linear-gradient(  right center,  var(--navbarClr) 0%,  var(--navbarClr) 75%,  var(--navbar_lightClr) 100% );
}

#pagerender_masthead h1 {
	margin:0;
	font-size:16px;
	line-height:30px;
	text-shadow: 
		-1px -1px var(--outlineShadowColor, #0009),
		-1px 1px var(--outlineShadowColor, #0009),
		1px -1px var(--outlineShadowColor, #0009),
		1px 1px var(--outlineShadowColor, #0009);
}

#pagerender_header *.loginboxTiny {
	float:right;
	text-align:right;
	margin: 10px 5px 0 0;
	font-size: 12px;
}

#pagerender_header *.loginboxTiny #masthead_admin_link		{ padding-left: 4px; }
#pagerender_header *.loginboxTiny #masthead_signout_link	{ border-color: var(--navbar_textgreyClr) }
#pagerender_header *.loginboxTiny #masthead_options_link	{ border-color: var(--navbar_textgreyClr) }
#pagerender_header *.loginboxTiny #loginbox_user		{ border-color: var(--navbar_textgreyClr) }
#pagerender_header *.loginboxTiny input { font-size: 10px; }

#pagerender_header #coursename span { white-space: nowrap; }

*.loginboxTiny { font-size: ; }

*.loginboxTiny #loginbox_user { border-right: 1px solid var(--textClr); padding-right: .5em; }
*.loginboxTiny #loginbox_pass { padding-left: .5em; }

*.loginboxTiny li { display:inline; white-space:nowrap; }
*.loginboxTiny #masthead_options_link { border-right: 1px solid var(--textClr); padding-right: .5em; }
*.loginboxTiny #masthead_signout_link { border-right: 1px solid var(--textClr); padding: 0 .5em; }
*.loginboxTiny #masthead_courses_link { padding-left: .5em; }

*.loginboxTiny #masthead_admin_link a { text-decoration:none; }
*.loginboxTiny.adminEnabled #masthead_admin_link a { font-family: monospace; font-weight: bold; }
*.loginboxTiny #masthead_admin_link table { background:var(--activityClr); }
*.loginboxTiny #masthead_admin_link input { font-size: 6pt; }

*.loginboxTiny ul { padding: 0; margin:0; display:inline; }
*.loginboxTiny span { white-space: nowrap; }

form.loginboxTiny input { font-size: x-small; }
form.loginboxTiny #loginmsg span { white-space: normal; font-weight: bold; font-size: small; }	

*.loginboxTiny #mycourses_list { background: var(--bgemClr); border: 1px solid var(--textClr); padding: 4px; position:absolute; }
*.loginboxTiny #mycourses_list a:link,
*.loginboxTiny #mycourses_list a:visited,
*.loginboxTiny #mycourses_list a:active {
	color: var(--linkClr);
}

*.loginboxTiny.adminEnabled { background: var(--activityClr); padding: .25em .5em; border-radius: .5rem; }
div.loginboxTiny.adminEnabled a { color: var(--activity_textClr) }

*.loginboxTiny #masthead_newbie h2 { margin:3px 0 0 0; font-size: small; }
*.loginboxTiny #masthead_newbie p  { margin:0; width: 300px; }

#masthead_newbie {
	color: var(--navbar_textClr);
	background-color: var(--navbarClr);
	border: solid 1px var(--navbar_textClr);
	margin: 10px;
	padding:10px;
	-moz-border-radius-topleft: 5px;
-webkit-border-top-left-radius: 5px;
-moz-border-radius-topright: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-bottomleft: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-right-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 5px 5px 5px grey;
-webkit-box-shadow: 5px 5px 5px grey;
box-shadow: 5px 5px 5px grey;
}

/*-----------------------------
	=NAVIGATION
-----------------------------*/

body.navbar,
.navbar {
	color: var(--navbar_textClr);
	background-color: var(--navbarClr);
}

a.navbar,
a.navbar:link,
a.navbar:visited,
a.navbar:active { color:var(--navtextClr); font-Family: arial narrow, helvetica, arial, sans-serif;}
a.navbar:hover, a.navselected { color:var(--title2Clr); font-Family: arial narrow, helvetica, arial, sans-serif;}

h5.navbar { margin: 0em; padding: .3em; color: var(--title1Clr); background-color: var(--navbarClr) }

.navbar a,
.navbar a:link,
.navbar a:visited,
.navbar a:active {
	color: var(--navbar_textClr);
}

.navbar.gradientDL {
	background-image: -moz-linear-gradient(  left center,  var(--navbar_darkClr) 0%,  var(--navbarClr) 75%,  var(--navbar_lightClr) 100% );
}
.navbar.gradientLD {
	background-image: -moz-linear-gradient(  left center,  var(--navbar_lightClr) 0%,  var(--navbarClr) 25%,  var(--navbar_darkClr) 100% );
}


.commtool {
	color: var(--commtool_textClr);
	background-color: var(--commtoolClr);
	--outlineShadowColor: var(--commtool_textshadowClr);
	text-shadow: 
		-1px -1px var(--outlineShadowColor, #0009),
		-1px 1px var(--outlineShadowColor, #0009),
		1px -1px var(--outlineShadowColor, #0009),
		1px 1px var(--outlineShadowColor, #0009);
}

.commtool a,
.commtool a:link.
.commtool a:visited,
.commtool a:active {
	color: var(--commtool_linkClr);
}

.commtool.gradientDL {
	background-image: -moz-linear-gradient(  left center,  var(--commtool_darkClr) 0%,  var(--commtoolClr) 75%,  var(--commtool_lightClr) 100% );
}

.commtool.gradientLD {
	background-image: -moz-linear-gradient(  left center,  var(--commtool_lightClr) 0%,  var(--commtoolClr) 25%,  var(--commtool_darkClr) 100% );
}

.resource {
	color: var(--resource_textClr);
	background-color: var(--resourceClr);
	--outlineShadowColor: var(--resource_textshadowClr);
	text-shadow: 
		-1px -1px var(--outlineShadowColor, #0009),
		-1px 1px var(--outlineShadowColor, #0009),
		1px -1px var(--outlineShadowColor, #0009),
		1px 1px var(--outlineShadowColor, #0009);
}

.resource a,
.resource a:link,
.resource a:visited,
.resource a:active {
	color: var(--resource_linkClr);
}

.activity {
	color: var(--activity_textClr);
	background-color: var(--activityClr);
}
.activity.gradientDL {
	background-image: -webkit-gradient(  linear,  left top,  right top,  color-stop(0, var(--activity_darkClr)),  color-stop(0.75, var(--activityClr)),  color-stop(1, var(--activity_lightClr)) );
	background-image: -moz-linear-gradient(  left center,  var(--activity_darkClr) 0%,  var(--activityClr) 75%,  var(--activity_lightClr) 100% );
}



.activity a,
.activity a:link,
.activity a:visited,
.activity a:active { 
	color: var(--activity_linkClr);
}

.announce {
	color: var(--announce_textClr);
	background-color: var(--announceClr);
}

.announce a,
.announce a:link,
.announce a:visited,
.announce a:active {
	color: var(--announce_linkClr); 
}

.bg {
	color: var(--bg_textClr);
	background-color: var(--bgClr);
}

.bg a,
.bg a:link,
.bg a:visited,
.bg a:active,{
	color: var(--bg_linkClr);
}

.bgem {
	color: var(--bg_textClr);
	background-color: var(--bgemClr);
}

.bgem a,
.bgem a:link,
.bgem a:visited,
.bgem a:active {
	color: var(--bgem_linkClr); 
}
.bgemShadow	{
	-moz-box-shadow: 4px 4px 4px var(--bgem_darkClr);
	-webkit-box-shadow: 4px 4px 4px var(--bgem_darkClr);
}

.subsystem {
	font-weight:bold;
	font-variant:small-caps;
	text-align:center;
	white-space: nowrap;
	font-family:Georgia, "Times New Roman", Times, serif;
	margin:0 20px 5px -5px!important;
	padding:5px;
	border:1px solid var(--navbar_textgreyClr);
	-moz-border-radius-topleft: 5px;
	-webkit-border-top-left-radius: 5px;
	-moz-border-radius-topright: 5px;
	-webkit-border-top-right-radius: 5px;
	-moz-border-radius-bottomleft: 5px;
	-webkit-border-bottom-left-radius: 5px;
	-moz-border-radius-bottomright: 5px;
	-webkit-border-bottom-right-radius: 5px;
	-moz-box-shadow: 2px 2px 2px var(--navbar_darkClr);
	-webkit-box-shadow: 2px 2px 2px var(--navbar_darkClr);
	box-shadow: 2px 2px 2px var(--navbar_darkClr);

	text-shadow: 
		-1px -1px var(--outlineShadowColor, #0009),
		-1px 1px var(--outlineShadowColor, #0009),
		1px -1px var(--outlineShadowColor, #0009),
		1px 1px var(--outlineShadowColor, #0009);
}

/*-----------------------------
	=CONTENT
-----------------------------*/
#pagerender_content {
	min-height: 300px;
	padding: 1em;
}

/*-----------------------------
	=FOOTER
-----------------------------*/

#pagerender_footer {
	clear: both;
	padding:0;
	background-color: var(--bgClr);
	font-size:14px;
}

.round_bottom {
	-moz-border-radius-bottomleft: 5px;
	-webkit-border-bottom-left-radius: 5px;
	-moz-border-radius-bottomright: 5px;
	-webkit-border-bottom-right-radius: 5px;
	background-color: var(--bgemClr);
	padding:10px;
	margin:0;
}

#pagerender_footer * ul,
#pagerender_footer * li {
	display:inline;
	list-style:none;
}	

#pagerender_footer li {
	border-right:1px solid #ccc;
	display:inline;
	padding:5px 10px;
}

#pagerender_footer ul li:last-of-type {
	border:none;
}


/*-----------------------------
	=BREADCRUMBS
-----------------------------*/

#pagerender_header .breadcrumbs {
	margin:0;
	padding:5px 0px;
	font-size:11px;
}

#pagerender_header .breadcrumbs ul,
#pagerender_header .breadcrumbs li {
	margin:0 0 0 5px;
	padding:0 0px;
	list-style:none;
	display:inline;
}


.breadcrumbs.commtool a { color:var(--commtool_textClr) }
.breadcrumbs.resource a { color:var(--resource_textClr) }
.breadcrumbs.activity a { color:var(--activity_textClr) }
.breadcrumbs.announce a { color:var(--announce_textClr) }



/* log in box 
======================== */


.loginUASO {
	padding: 10px;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	width:220px;
	background-color: var(--bgemClr);
}


.loginUASO h2 {
	font-size: 18px;
	font-weight: 400;
	margin-bottom: 0px;
}
/* Remove the table tag's padding, bgcolor, and border code and style with css */
.loginUASO table {
	margin: 0 auto;
}
.loginUASO table th, .loginUASO table td, .loginUASO table tr {
	width: auto!important;
	display: block;
	text-align: left!important;
}
.loginUASO td {
	padding: 5px;
}
/* style the footer links */
.loginUASO div.footer {
	margin-top: 15px;
	border-top: 1px #999 dotted;
	padding: 5px 0;
}
#pwd_help {
	float: left;
	clear: left;
	padding-top: 10px;
}
.loginformSwitch {
	float: right;
}
.loginguestToggle {
	border-bottom: dotted 1px #e3e3e3;
	margin-bottom: 5px 0;
	padding: 5px 0 15px 0;
}
.loginformSwitch {
	text-align: right;
	padding: 10px 0;
}
/* style form and input boxes */

.loginUASO form {
	padding: 0;
	margin: 10px 0;
}
.loginUASO input[type="text"], .loginUASO input[type="password"] {
	margin-bottom: 2px;
	opacity: 1;
	padding: 4px 4px;
	font-size: inherit;
}
.loginUASO input[type="text"]:focus, .loginUASO textarea:focus, .loginUASO input[type="password"]:focus {
	border-color: none;
}
/* Add class="login-btn" to the submit input */

.login-btn {
	display: inline-block;
 *display: inline;
	padding: 4px 12px;
	margin-bottom: 0;
	margin-top:5px;
 *margin-left: .3em;
	font-size: 14px;
	line-height: 20px;
 *line-height: 20px;
	color: #333333;
	text-align: center;
	text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
	vertical-align: middle;
	cursor: pointer;
	background-color: #f5f5f5;
 *background-color: #e6e6e6;
	background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
	background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
	background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
	background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
	background-repeat: repeat-x;
	border: 1px solid #bbbbbb;
 *border: 0;
	border-color: #e6e6e6 #e6e6e6 #bfbfbf;
	border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
	border-bottom-color: #a2a2a2;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
 filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
 *zoom: 1;
	-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
	-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
}
.login-btn:hover, .login-btn:active, .login-btn.active, .login-btn.disabled, .login-btn[disabled] {
	color: #333333;
	background-color: #e6e6e6;
 *background-color: #d9d9d9;
}
.login-btn:active, .login-btn.active {
	background-color: #cccccc \9;
}
.login-btn:first-child {
 *margin-left: 0;
}
.login-btn:hover {
	color: #333333;
	text-decoration: none;
	background-color: #e6e6e6;
 *background-color: #d9d9d9;
	/* Buttons in IE7 don't get borders, so darken on hover */
	background-position: 0 -15px;
	-webkit-transition: background-position 0.1s linear;
	-moz-transition: background-position 0.1s linear;
	-o-transition: background-position 0.1s linear;
	transition: background-position 0.1s linear;
}
.login-btn:focus {
	outline: thin dotted #333;
	outline: 5px auto -webkit-focus-ring-color;
	outline-offset: -2px;
}
.login-btn.active, .login-btn:active {
	background-color: #e6e6e6;
	background-color: #d9d9d9 \9;
	background-image: none;
	outline: 0;
	-webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
	-moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
	box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
}
.loginUASO table input.login-btn {
	width: 100%;
}

.loginformAlert label {
	display: block;
}
.loginformAlert input {
	display: block;
}
.loginUASO label {
	white-space: nowrap;
}

/* end log in box 
======================== */



.sr-only {			/* Screen reader only content... hide from normal view */
position:absolute;
left:-10000px;
top:auto;
width:1px;
height:1px;
overflow:hidden;
}


/* Create a list of form fields ... similar to the old right_adjust function */

.formFieldList >*
{
  min-height: .75rem;
  font-size: small;

  display: grid;
  /* Set the columns of the nested grid to use the parent's tracks */
  grid-template-columns: subgrid;   
  /* Make the row container span all columns of the parent grid */
  grid-column: 1 / -1;   
}
.formFieldList legend { grid-template-columns: auto; }

.formFieldList fieldset { padding: 0; border: none }
.formFieldList fieldset legend { display: contents; }

.formFieldList   div:has(input[type="radio"]) {flex-flow: wrap;}
.formFieldList label:has(input[type="radio"]) {flex-grow: 0; display: flex; align-items: center; }

  /* Seems redundent, but it's intended to make things the same small size, even if explicitly placed in a <small> wrapper */
.formFieldList small { font-size: small; }

.formFieldList >:empty { min-height: 0.25rem; }

.formFieldList >* >:first-child
{
  justify-self: end; text-align: right;
}
.formFieldList >* >:last-child
{ display: flex; gap: .25rem; align-items: center; }
.formFieldList >* >:last-child >* { flex-grow:1; }

.formFieldList
{
  --xxsmall: .125rem;
  --xsmall:  .25rem;

  display: grid;
  /* Define the main columns that the subgrids will inherit */
  grid-template-columns: minmax(max-content,1fr) 3fr; 

  width: unset;
  background: var(--bgClr);

  gap: var(--xxsmall) var(--xsmall);
  font-size:var(--small);

  border: 1px solid var(--fgClr);
  padding: var(--xxsmall);
  margin: var(--xxsmall) 0;
  box-sizing: border-box;
  overflow: auto;
}

.formFieldList input[type="number"] { flex-grow: 0; width: 4em; text-align: right; }

.formFieldList.fflTight { grid-template-columns: max-content 3fr; }


/* If the form/fieldlist is not contained in any kind of container, set it to min-content width and normal sized font  */
#pagerender_content >form >.formFieldList { width: min-content; }
#pagerender_content >form >.formFieldList >* { font-size: initial; }