* {
	margin:0; padding:0; font-size:100%; 
}

p, h3,li { margin:.5em 0; }

:root {
	--icebear-smallscreen:0;
}

html, body {
	height:100%; background:black; color:var(--mainTextColor);
	font-family:verdana,arial,helvetica,sans-serif;
}
body { background:var(--mainBackground); background-size:cover; color:var(--mainTextColor); }
a { text-decoration:none; }
a:hover { text-decoration:underline; }


.hidden { display:none; }

#container	{ position:relative; height:auto !important; min-height:100%; width:100%; }
header		{ position:absolute; left:0; top:0; border-bottom:var(--headerBottomBorder); height:2.5em; width:100%; background:var(--headerBackground);
				overflow:hidden; text-align:left;
				font-size:150%; line-height:2.25em; color:var(--headerTextColor); opacity:var(--headerOpacity);}
header a { height:2em; display:inline-block; margin:0.25em 0 0; float:right; color:var(--headerTextColor); text-decoration:underline; }
header a.control { float:right; margin-right:0.5em; width:2em; background-image:var(--headerControlBackgroundImage); background-size:cover; position:relative; top:0; }
header a.control img { position:absolute; top:10%;left:10%;height:80%; }
header a.breadcrumb { float:left; width:2.5em; background-image:var(--breadcrumbBackgroundImageFirst); background-size:cover; position:relative; top:0; }
header a.breadcrumb img { position:absolute; top:15%;left:18%;height:70%; }
header a.breadcrumb+a.breadcrumb { background-image:var(--breadcrumbBackgroundImage); }
header a.breadcrumb+a.breadcrumb img { top:15%;left:22%;height:70%; }
header h1 { display:inline-block; margin-left:0.25em; }
header #headersearch {
	float:right; margin-right:1em; width:10em; position:relative; top:0.5em;
	background: var(--searchBoxBackground); color: var(--searchBoxColor); opacity: var(--searchBoxOpacity);
}

#searchboxresults { position:absolute; top:0; right:0; display:none; background:var(--searchResultBackground);
	border:1px solid #666; color:var(--searchResultColor); opacity:var(--searchResultBackground);
					z-index:99999; max-width:70%; overflow:auto; }
#searchboxresults td {}
#searchboxresults td a { display:block; color:var(--searchResultColor); }
#searchboxresults td:hover { background:var(--searchResultBackgroundHover); }
#searchboxresults tr.selected { background:var(--searchResultBackgroundCurrent); }


#content	{ position:absolute; top:4em; bottom:0.5em; left:0.5em; right:0.5em; }

div.error { background-color:#900; color:#fff; font-weight:bold; border-radius:0.5em; line-height:1.5em; text-align:center; }
div.warning { background-color:#ffc; color:#660; font-weight:bold; border-radius:0.5em; line-height:1.5em; text-align:center; }

.shim { clear:both; font-size:0; }

.grid { height:100%; width:100%; position:absolute; top:0;left:0; }
.boxslot { position:absolute; height:31%; border:2px solid #ccc; background-color:transparent; width:32%; opacity:0.5; border-radius:0.75em; }
.box { position:absolute; height:31%; border:var(--boxAndTabBorder); background-color:#eee; width:32%; border-radius:0.75em 0 0 0; opacity:var(--boxAndTabOpacity); }
.box h2 {
	position:absolute;top:0;left:0;right:0; z-index:2; padding-left:0.25em;line-height:2em;
	background-color:var(--boxAndCurrentTabHeaderBackgroundColor); color:var(--boxAndCurrentTabHeaderTextColor); border-radius:0.6em 0 0 0;
}
.box h2 a { font-size:90%; margin-left:1em; color:#ddd; } 
.box .boxbody { z-index:1; background:var(--boxBodyBackground); padding:0.5em; position:absolute;top:0; bottom:0; left:0; right:0; border-radius:0.6em 0 0 0; overflow:auto; }
.box h2+.boxbody { z-index:1; background-color:var(--boxBodyBackground); top:2em; border-radius: 0;}
.box .boxbody p {margin-bottom:0.75em; }
.boxbody .boxpanel { background:#eee; position:absolute; top:0;left:0; right:0; bottom:0; padding:0.5em; }

.box h2 .closeicon { position:absolute;right:0.5em; top:0;height:2em; width:2em; cursor:pointer; background-size:contain; }
.box h2.lighticons .closeicon { background-image:url(../images/icons/lighticons/close.gif); }
.box h2.darkicons .closeicon  { background-image:url(../images/icons/darkicons/close.gif); }

.hastable { padding:0 !important; position:relative;top:0; }
.hastable table { width:100%; line-height:2.49em; border-collapse:collapse; }
.hastable tr { border-bottom:1px solid #999; }
.hastable tr.filterrow { background-color:#ccc; }
.hastable tr.filterrow input { width:5em; }
.hastable th { color:var(--tableHeaderColor); }
.hastable th, .hastable td { text-align:left; padding:0 0.5em; border-bottom:1px solid #999; }
.hastable th sub { font-size: 80%; }
.hastable th img,
.hastable td img { max-height:1.5em; vertical-align:middle; }

.r1 { top:1%; }
.r2 { top:34%; }
.r3 { top:67%; }
.c1 { left:1%; }
.c2 { left:34%; }
.c3 { left:67%; }
.h1 {  }
.h2 { height:64%; }
.h3 { height:97% }
.w1 {  }
.w2 { width:65%; }
.w3 { width:98%; }

#modalWindow { z-index:10000; position:absolute; top:0;left:0; bottom:0; right:0; display:none; }
#modalWindow #modalBackground { position:absolute; top:0;left:0; bottom:0; right:0; background:#666; opacity:0.7; }
#modalWindow #modalContent { position:absolute; top:4em; bottom:0.5em; left:0.5em; right:0.5em; }
#modalWindow .box { top:0; bottom:2em; left:2em; right:2em; height:auto; width:auto; }
#modalWindow .box .col1 { position:absolute; top:1em; left:2%; width:16%; }
#modalWindow .box .col2 { position:absolute; top:1em; left:22%; width:16%; }
#modalWindow .box .col3 { position:absolute; top:1em; left:42%; width:16%; }
#modalWindow .box .col4 { position:absolute; top:1em; left:62%; width:16%; }
#modalWindow .box .col5 { position:absolute; top:1em; left:82%; width:16%; }
#modalWindow .box .menucolumn .menusection { margin-bottom:1em;  }
#modalWindow .box .menucolumn h3 { font-size:120%; border-bottom:1px solid #666; padding:0; margin:0 }
#modalWindow .box .menucolumn a { display:block; line-height:2em; text-decoration:none; }
#modalWindow .box .menucolumn a:hover { background-color:#ddd; color:#000; }

label { display:block; text-align:right; background-color:var(--labelBackground); color:var(--labelTextColor); font-size:100%; border-radius:0.25em; padding:0 0.5em; opacity:var(--labelOpacity); line-height:2em;background-position:0 0; }
label.radiohead { background-color:#444; color:#ccc; }
label.buttons   { background:transparent; }
label.invalidfield,
input.invalidfield { background-color:#fcc; }
form+form,
label+label { margin-top:0.2em; }
div.subform+label { margin-top:0.2em; }
label span.label { float:left; margin:0; font-weight:bold; }
label h3 { text-align:left; font-size:120%; margin:0; font-weight:bold; padding:0 }
.updating { background-image:var(--updatingBackgroundImage) !important; background-position:var(--updatingBackgroundEndPosition) !important; transition:var(--updatingTransition) !important; }
div.subform { margin:0.2em 0.5em 0 1.5em; }
textarea,
button,
input[type=text],
input[type=password],
input[type=button],
input[type=submit]   { border:none; border-radius:0.2em; padding:0 0.25em; background-color:var(--textBoxBackground); background-position:0 0; color:var(--textBoxColor); width:40%; font-size:120%;}
textarea { margin-top:0.1em; }
button,
input[type=button],
input[type=submit]   { border:none; background:var(--buttonBackground); color:var(--buttonTextColor); padding:1px 0.5em; width:auto; }
th input[type=button],
th input[type=submit],
td input[type=button],
td input[type=submit]   { float:right; margin-top: .5em; }
label img { height:1.5em; margin:0.25em 0; cursor:pointer; }
label div.helptext {
	font-size:70%; line-height:1.25em; border-top:1px solid #999; font-weight:bold; text-align:left;
	color: var(--labelHelpTextColor);
}
label div.errortext {
	font-size:70%; line-height:1.25em; border-top:1px solid #999; color:red; font-weight:bold;
}
::placeholder { color: var(--placeHolderTextColor) !important; opacity: 1; }
::-webkit-input-placeholder { color: var(--placeHolderTextColor) !important; opacity: 1; }
::-ms-input-placeholder { color: var(--placeHolderTextColor) !important; opacity: 1; }
span.required { font-weight: bold; color:red; }

.audiofield {
	padding-top: 0.25em;
}
.audiofield div.recordingcontrols {
	height: 2em;
	line-height: 2em;
	border-radius: 0.25em;
	background-color: #666;
	color:#ccc;
	text-align: left;
	padding-left: 0.5em;
	cursor: pointer;
}
.audiofield span.recordingmessage {
	display: inline-block;
	height: 2em;
	line-height: 2em;
	vertical-align: top;
	font-weight: bold;
	padding-left: 0.5em;
}
.audiofield.updating div.recordingcontrols {
	background-color: #660;
}
.audiofield div.recording {
	background-color: #060;
}
.audiofield div.recordingerror {
	cursor: default;
	background-color: #600;
}

.audiofield div.recordings {
	text-align: left;
	padding-top: .5em;
	line-height: 2em;
}
.audiofield audio {
	margin-top: 0.5em;
	height:2em;
	width: 14em;
	vertical-align: middle;
	position: relative;
	top:-.5em;
}

/* Radio buttons*/
label label { border:none; width:40%; float:right; text-align:left; margin-top:0.2em; }
label label>input { margin-right:.5em; }
label label+label { clear:both; }
label label.selected { border:1px solid #666; background-color:#eee; }

table.uitable {
	background: inherit;
}
table.uitable tr:not([class=headerrow]):hover { background:var(--tableRowHoverColor); }
table.uitable tr:not([class=headerrow]):hover th { background:var(--tableRowHoverColor); }
table.uitable tr:not([class=headerrow]):hover td { background:var(--tableRowHoverColor); }

.lighticons th.sortable span {
	display:inline-block; padding-left:1.25em;
	background-image:url(../images/icons/lighticons/sortorders.png); background-position:0 -50px;
	background-repeat:no-repeat; cursor:pointer; 
}
.darkicons th.sortable span { 
	display:inline-block; padding-left:1.25em;
	background-image:url(../images/icons/darkicons/sortorders.png); background-position:0 -50px;
	background-repeat:no-repeat; cursor:pointer; 
}
.darkicons th.sorteddescending span,
.lighticons th.sorteddescending span { background-position:0 -170px; }
.darkicons th.sortedascending span,
.lighticons th.sortedascending span { background-position:0 -110px; }
table.uitable thead {
	z-index: 999;
	position: sticky;
	top:0;
}
table.uitable thead tr {
	position: relative;
	background-color: var(--tableHeaderBackgroundColor);
	box-shadow: 1px 0 0 #666;
}
table.uitable tr .stickyColumnCell {
	position: sticky;
	background-color: var(--tableHeaderBackgroundColor);
	left: 0; /* override in JS for second and subsequent columns */
}
table.uitable tr .stickyFilterColumnCell {
	background-color: #ccc;
}


.bignumbers { font-size:300%; color:#999; font-weight: bold; }

a { color:var(--mainLinkColor); font-weight:bold; }
a:active { color:var(--mainLinkColorActive); font-weight:bold; }

/* Mainly used in date picker */
input[type=button].datepickerday { background-color: var(--datePickerSelectedButtonBackgroundColor); color:var(--datePickerWeekdayButtonTextColor) }
input[type=button].unselected { background-color:var(--datePickerUnselectedButtonBackgroundColor); }
input[type=button].weekend { color:var(--datePickerWeekendButtonTextColor); }


div.tabset { position:absolute; opacity:var(--boxAndTabOpacity);
;}
div.tabset h2 {
	cursor:pointer; background-color:var(--tabHeaderBackgroundColor); color:var(--tabHeaderTextColor); line-height:2em;
	border:var(--boxAndTabBorder); float:left; z-index:2; padding:0 1em 0 0.5em; margin-right:-2px; border-radius:0.75em 0 0 0;
}
div.tabset h2.warning {
	background-image:url(../images/icons/darkicons/warning.png); background-position:right center;
	background-size:1.5em; background-repeat: no-repeat; background-color:var(--warningTabHeaderBackground);
	color:var(--warningTabHeaderTextColor); padding-right:1.5em;
}
div.tabset h2.complete {
	background-image:url(../images/icons/darkicons/yes.gif); background-position:right center;
	background-size:1.5em; background-repeat: no-repeat; background-color:var(--completedTabHeaderBackground);
	color:var(--completedTabHeaderTextColor); padding-right:1.5em;
}
div.tabset h2.close,
div.tabset h2.error {
	background-image:url(../images/icons/darkicons/no.gif); background-position:right center;
	background-size:1.5em; background-repeat: no-repeat; background-color:#ebb;
	padding-right:1.5em;
}
div.tabset h2.current { background-color:var(--boxAndCurrentTabHeaderBackgroundColor); color:var(--boxAndCurrentTabHeaderTextColor); }
div.tabset h2.disabledtab { background-color:var(--disabledTabHeaderBackground); color:var(--disabledTabHeaderTextColor); cursor:not-allowed; }
div.tabset div.tabwrapper,
div.tabset div.tabbody {
	 position:absolute; top:2em; bottom:-4px;left:0;right:-4px; border:var(--boxAndTabBorder); background:var(--tabBodyBackground); border-radius:0; display:none; overflow:auto; }
div.tabset h2.current+div.tabbody { display:block; z-index:0; }
div.tabset div.tabwrapper { display:block; z-index:0; }
div.tabset div.tabbody { padding:0.5em; min-height:10em; }

#modalWindow div.tabset { top:0; bottom:2em; left:2em; right:2em; height:auto; width:auto; }
#modalWindow h2.close{ position:absolute; top:0; right:0; z-index:0; }

div.treeitem { margin-top:0.25em; }
div.treeitem h3 { line-height:2em; background:#555; color:#eee; border-radius:0.25em; cursor:zoom-out; }
div.treeitem h3.warning {
	background-image:url(../images/icons/darkicons/warning.png); background-position:2.75em center;
	background-size:1.5em; background-repeat: no-repeat; background-color:#ff9; color:#666;
	padding-right:1.5em;
}

div.closed h3 { cursor:zoom-in; } 
div.treeitem h3.treehead a { color:#ccc; font-weight:bold; }
div.treeitem h3.treehead a:active { color:#fff; font-weight:bold; }
div.treeitem span.toggleitem { display:inline-block;width:1.75em; height:1.75em; text-align:center; margin:0 0.5em; position:relative; top:.25em; background-size:contain; background-repeat: no-repeat; }
div.treeitem h3.warning span.toggleitem { width:3.5em; }
div.treeitem h3.lighticons .toggleitem { background-image:url(../images/icons/lighticons/btn_minus.gif); }
div.treeitem.closed h3.lighticons .toggleitem { background-image:url(../images/icons/lighticons/btn_plus.gif); }
div.treeitem[class=closed] div.treehead[class=lighticons] .toggleitem { border:1px solid yellow;}
div.treeitem div.treebody { margin-left:2em; }
div.closed div.treebody { display:none; }
div.treebody h3.treehead { background:#777; }

/* Project */


/* Drag-drop styles */
.draggable h2 {cursor:move; }
.droppable { color:var(--dragDropDroppableTextColor); border-color:var(--dragDropDroppableTextColor); background-color:var(--dragDropDroppableBackgroundColor); }
.activedroppable { color:var(--dragDropActiveDroppableTextColor); border-color:var(--dragDropActiveDroppableTextColor); background-color:var(--dragDropActiveDroppableBackgroundColor); }

/* Usergroup */
#members_body div.groupedituserbutton { display:inline-block; border:1px solid #393; background:#cfc; border-radius:0.2em; margin:0.2em; padding:0.2em; cursor:pointer; }
#members_body #removedusers { float:right; margin-left:0.5%; height:99%; width:30%; border:1px solid #333; padding:0.25em; }
#members_body #groupmembers,
#members_body #groupadmins { min-height:15%; }

/* Homepage */
#addbrickbox { z-index:20000; }
.homepagebrick table { white-space:nowrap; }

/* Homepage "add bricks" brick list: Brick size icon is a sprite */
tr.bricklist .bricksizeicon { display:inline-block; vertical-align:middle; width:22px;height:22px; background-image:url(../images/icons/darkicons/bricksizes.png); background-position:0 0; }
.lighticons tr.bricklist .bricksizeicon { background-image:url(../images/icons/lighticons/bricksizes.png); }
tr.bricklist .h1w1 { background-position:0 0; }
tr.bricklist .h1w2 { background-position:-60px 0; }
tr.bricklist .h1w3 { background-position:-120px 0; }
tr.bricklist .h2w1 { background-position:0 -60px; }
tr.bricklist .h2w2 { background-position:-60px -60px; }
tr.bricklist .h2w3 { background-position:-120px -60px; }
tr.bricklist .h3w1 { background-position:0 -120px; }
tr.bricklist .h3w2 { background-position:-60px -120px; }
tr.bricklist .h3w3 { background-position:-120px -120px; }

div.homepageresize { position:absolute; background-color:#999; color:#333; z-index:9999; font-size:200%; font-weight: bold;}
div.homepageresizetop { top:0; left:calc(50% - .75em); max-width:1.5em; border-radius: 0 0 0.2em 0.2em; }
div.homepageresizebottom { bottom:0; left:calc(50% - .75em); max-width:1.5em; border-radius: 0.2em 0.2em 0 0;}
div.homepageresizeleft { left:0; top:calc(50% - .75em); border-radius: 0 0.2em 0.2em 0; }
div.homepageresizeright { right:0; top:calc(50% - .75em); border-radius: 0.2em 0 0 0.2em; }
span.homepageresizesmaller,
span.homepageresizebigger { color:#0f0; display: inline-block; background-color: #333; width:1.25em; height:1.25em;
	border-radius: 0.25em; margin: 0.1em; text-align: center;
	cursor: pointer;
}
span.homepageresizesmaller { color:#f00;}

label+div.msgbar { margin-top: 0.2em; }

div.msgbar {
	background-color:#ccc; color:#333; line-height:2em; border-radius:0.25em; margin-bottom: 0.25em; text-align: left;
	background-size:1.5em; background-repeat: no-repeat; padding-left:2em; padding-right:1em; font-weight: bold;
}
.hastable div.msgbar {
	margin:0.5em;
}
div.completedbar    {
	background-image:url(../images/icons/darkicons/yes.gif); background-position:left center;
	background-color:var(--completedBackgroundColor); color:var(--completedTextColor);
}
div.warningbar {
	background-image:url(../images/icons/darkicons/warning.png); background-position:left center;
	background-color:var(--warningBackgroundColor); color:var(--warningTextColor);

}
div.errorbar   {
	background-image:url(../images/icons/darkicons/no.gif); background-position:left center;
	background-color:var(--errorBackgroundColor); color:var(--errorTextColor);

}
div.infobar    {
	background-image:url(../images/icons/darkicons/info.png); background-position:left center;
	background-color:var(--infoBackgroundColor); color:var(--infoTextColor);
}


div.starrating { display: inline-block; cursor: pointer; }
div.starrating.readonly { cursor: default; }
label div.starrating { font-size: 150%; }
td div.starrating,
th div.starrating { font-size: 110%; }

/* For SAML/Shibboleth login */
a.idp { float:left; position:relative; display:inline-block; width:28%; margin:2%; aspect-ratio:1; border:2px solid #999;
	background-color:#fff;  text-align:center; cursor:pointer; border-radius:0.5em;  }
a.idp div { position:absolute; top:1em; right:1em; left:1em; bottom:2.25em; background-size:contain; background-repeat:no-repeat; background-position:50% 50%; }
a.idp span { position:absolute; bottom:0; left:0; right:0; height:1.25em; font-weight:bold; color:#333; background-color:#ddd; border-radius:0 0 5px 5px; }

@media print {
	
	body { font-size:80%; background-color:white !important; color:black !important; }
	
	.noprint,
	button,
	input[type=button],
	input[type=submit]
	 { display:none; }
	
	header #headersearch,
	.boxslot,
	input[type="button"]
	 { display:none; }
	
	header,
	#content,
	.grid,
	.tabset,
	.box,
	.box h2,
	.box .boxbody,
	div.tabset,
	div.tabset h2,
	div.tabset div.tabbody,
	div.tabset h2.current+div.tabbody
	 { position:static; width:auto; }
	
	.box { margin-top:2em; border:none; page-break-inside:avoid; }
	.box h2 { border-bottom: 0.2em solid black; }
	.box+.box {  }

	div.tabset {}
	div.tabset h2 	{ margin-top:2em; float:none; border:none; border-bottom: 0.2em solid black; page-break-after:avoid; }	
	
	div.tabset div.tabbody { display:block; border:none; page-break-before:avoid; widows:3; orphans:3; }
	
	div.treeitem .treebody { display:block !important; } 
	
	form { position:static !important; width:auto !important; float:none !important; }
	
}

@media screenDONOTUSE and (max-width:65em) {
	
	:root { --icebear-smallscreen:1; }
	html,body { height:auto; background:#ccc; font-size:0.8cm; }
	header { font-size:100%; height:auto; }
	header a { height:1cm; width:1cm; }
	header a img { height:1cm; width:1cm; }
	header h1 { white-space:nowrap; display:block; float:left; margin:0 0.25cm; line-height:1cm; font-size:120%; }
	.nosmall { display:none; }
	
	header,
	#content,
	.grid,
	.tabset,
	.box,
	.box h2,
	.box .boxbody,
	div.tabset,
	div.tabset h2,
	div.tabset div.tabbody,
	div.tabset h2.current+div.tabbody
	 { position:static; width:auto !important; height:auto; }
	 
	#content { padding:10px; height:auto; } 
	 
	div.boxslot { display:none; }

	tr.datarow th,
	tr.datarow td  { padding-top:0.3em; padding-bottom:0.3em; }

	div.tabset {}
	div.tabset h2 	{ float:none; display:block; background:#333; color:#eee; margin:0; }	
	
	div.tabset div.tabbody { display:none; border:2px solid #333; border-top:none; }
	
	div.box+div.box,
	div.box+div.tabset,
	div.tabset+div.box,
	div.tabbody+h2 { margin-top:1em; }
	
	div.tabset h2, div.box h2 { cursor:pointer; padding-top:0.25em; padding-bottom:0.25em; }

	.boxbody, .tabbody { display:none }
	div.noheader .boxbody { display:block !important; }
	/* Enforce accordion behaviour - treat tabs and boxes equally 
	.boxbody, .tabbody { display:none !important; }
	h2.smallscreen_open+div.boxbody,
	h2.smallscreen_open+div.tabbody,
*/
	#modalBox { position:absolute; top:2%; bottom:2%; right:0; left:0; }
	#modalBox .boxbody { display:block !important; position:absolute; top:2em; }
	#modalBox .menucolumn { position:static !important; width:auto !important; clear:both; }
	#modalBox .menusection { clear:both; }
	#modalBox .menusection+.menusection,
	#modalBox .menucolumn+.menucolumn { padding-top:0.5em; }
	#modalBox .menusection a { float:left; width:45%; margin-right:2.5%;}

}

@keyframes flash {
	0% { background:yellow; }
	100% { background:transparent; }
}
.flash {
	animation:flash 2s;
}