.lightbulb { display:inline-block; vertical-align:middle; width:16px;height:24px; background-position:0 0; }
.lighticons .lightbulb { background:url(../images/icons/lighticons/lightbulbs.png); }
.darkicons .lightbulb  { background:url(../images/icons/darkicons/lightbulbs.png); }


/* Drop map, e.g., Plate view's Drop Conditions tab */
table.dropmap						{ background:#ccc; border-radius:1em; }
table.dropmap tr					{  }
table.dropmap td					{ position:relative; top:0; padding:0.5em;
										border:0.5em solid #ccc; background-color:#ccc; border-radius:1em;
								    }
table.dropmap td.dropmapwell		{ border-color:#666; background-color:white; }
table.dropmap td.dropmapwell input	{ color:#333; background:white }
table.dropmap td.dropmapreservoir	{  }
table.dropmap td.dropmapempty		{ border-color:#999; background-color:#ccc; }
table.dropmap td.dropmapdead		{  }
table.dropmap td.current			{  }
table.dropmap div.welllabel			{ position:absolute; top:0; left:0; font-size:1.5em; color:#666; font-weight:bold; }

/**********************
 * DROP VIEWER styles
 **********************/

.dropviewer { background:#111; padding:0; left:0; right:0; bottom:0; }
.dropviewer #imagepane {  position:absolute;top:0;bottom:0;left:0;right:440px; overflow:hidden; }
.dropviewer img.dropimage { position:absolute;top:0;left:0;height:100%; cursor:crosshair; }
.dropviewer #controls  { position:absolute;top:0;bottom:0;width:420px;right:0; background:black; z-index:9999; }
.dropviewer #dropviewerpanel,
.dropviewer #timecoursepanel,
.dropviewer #selectpanel,
.dropviewer #dropinfopanel   { background:#000; color:#fff; position:absolute;top:0;bottom:5em;left:0;right:0; display:none; }

.dropviewer #dropinfopanel h2 { border-bottom:1px solid #666; }
.dropviewer #dropinfopanel a { color:#ccc; }

/* Drop measure tool */
.dropviewer #dv_measure { position:absolute; height:500px; width:500px; z-index:999; display:none; cursor:crosshair; }
.dropviewer #dv_measure #dv_cross { position:absolute;top:50%; left:50%; border:none; }
.dropviewer #dv_measure #dv_crossx { position:absolute;top:-10px; left:-1px; height:20px; width:10px; border:none; border-left:2px solid magenta; }
.dropviewer #dv_measure #dv_crossy { position:absolute;top:-1px; left:-10px; height:10px; width:20px; border:none; border-top:2px solid magenta; }
.dropviewer #dv_measure div { position:absolute; border:2px solid magenta; }
.dropviewer #dv_measure div span { color:#fff; text-shadow:1px 1px 1px black; position:absolute; top:-.75em; left:50%; font-size:80%; }
.dropviewer #dv_measure div span+span { top:53%; left:98%; }
.dropviewer #dv_measure div#ring1000 { top:0; bottom:0; left:0; right:0; border-radius:50%; }
.dropviewer #dv_measure div#ring900 { top:5%; bottom:5%; left:5%; right:5%; border-radius:50%; opacity:0.5; }
.dropviewer #dv_measure div#ring800 { top:10%; bottom:10%; left:10%; right:10%; border-radius:50%; }
.dropviewer #dv_measure div#ring700 { top:15%; bottom:15%; left:15%; right:15%; border-radius:50%; opacity:0.5; }
.dropviewer #dv_measure div#ring600 { top:20%; bottom:20%; left:20%; right:20%; border-radius:50%; }
.dropviewer #dv_measure div#ring500 { top:25%; bottom:25%; left:25%; right:25%; border-radius:50%; opacity:0.5; }
.dropviewer #dv_measure div#ring400 { top:30%; bottom:30%; left:30%; right:30%; border-radius:50%; }
.dropviewer #dv_measure div#ring300 { top:35%; bottom:35%; left:35%; right:35%; border-radius:50%; opacity:0.5; }
.dropviewer #dv_measure div#ring200 { top:40%; bottom:40%; left:40%; right:40%; border-radius:50%; }
.dropviewer #dv_measure div#ring100 { top:45%; bottom:45%; left:45%; right:45%; border-radius:50%; opacity:0.5; }

/* Fine scale marks on drop measure tool when scale is large enough */
.dropviewer div.dv_smallmeasure div.dv_smallmeasure { display:none; }
.dropviewer #dv_measure div#ring180 { top:41%; bottom:41%; left:41%; right:41%; border-radius:50%; opacity:0.3; }
.dropviewer #dv_measure div#ring160 { top:42%; bottom:42%; left:42%; right:42%; border-radius:50%; opacity:0.3; }
.dropviewer #dv_measure div#ring140 { top:43%; bottom:43%; left:43%; right:43%; border-radius:50%; opacity:0.3; }
.dropviewer #dv_measure div#ring120 { top:44%; bottom:44%; left:44%; right:44%; border-radius:50%; opacity:0.3; }
.dropviewer #dv_measure div#ring80  { top:46%; bottom:46%; left:46%; right:46%; border-radius:50%; opacity:0.3; }
.dropviewer #dv_measure div#ring60  { top:47%; bottom:47%; left:47%; right:47%; border-radius:50%; opacity:0.3; }
.dropviewer #dv_measure div#ring40  { top:48%; bottom:48%; left:48%; right:48%; border-radius:50%; opacity:0.3; }
.dropviewer #dv_measure div#ring20  { top:49%; bottom:49%; left:49%; right:49%; border-radius:50%; opacity:0.3; }

/* No image scale info available for drop measure tool */
.dropviewer #dv_measure #dv_nomeasure  { display:none; }
.dropviewer #dv_measure[class=dv_nomeasure] { height:2em !important; padding-left:2em; }
.dropviewer #dv_measure[class=dv_nomeasure] div  { display:none; }
.dropviewer #dv_measure[class=dv_nomeasure] #dv_nomeasure  { display:block; background-color:white;color:magenta; opacity:0.7; }

.dropviewer .delayslider { user-select:none; }

.dropviewer #dv_scores { position:absolute; left:0; right:0; top:110px; bottom:135px; background:#000; color:#eee; }
.dropviewer .dv_score { border:2px solid transparent; border-left:20px solid transparent; }

.dropviewer #dv_timecourseends { position:absolute; bottom:0; height:125px; width:100%; text-align:center; }
.dropviewer #dv_timecourseends img { max-height:90px; margin:0.25em 0.5em;}

.dropviewer .tc_lighttype { display:inline-block; padding-left:25px; font-weight:bold; border:4px solid #fff; color:#fff; border-radius:5px; 
				opacity:0.4; min-width:5em; height:3em; line-height:3em; cursor:pointer; margin-left:1em; 
				background-color:transparent; background-repeat:no-repeat; background-position:5px center; }
.dropviewer .tc_lighttypeactive { opacity:1; }
.dropviewer .tc_lighttype+.tc_lighttype {  }

.dropviewer .tc_dateoffset { display:inline-block; position:absolute; bottom:40%; left:160px; font-weight:bold; font-size:180%; }
.dropviewer .tc_actualdate { display:inline-block; position:absolute; top:60%; left:160px; }

.dropviewer #tc_images { background:#000; position:absolute; top:12em; bottom:0; left:0; right:0; overflow:auto; }
.dropviewer #tc_images div.timepoint { background:black; color:white; height:90px; position:relative; top:0; border:none; }
.dropviewer #tc_images div.suppressed { display:none; }
.dropviewer #tc_images div.currenttimepoint { background:#555; color:white; }
.dropviewer #tc_images img { max-height:90px; border-left:20px solid transparent; }

.dropviewer #viewswitcher { position:absolute;height:4.6em;bottom:0;left:0;right:0; }
.dropviewer #viewswitcher .viewbutton { border:4px solid #666; background:white; color:#666; display:inline-block; height:4em; width:4em; margin-right:0.25em; 
							cursor:pointer; line-height:4em; text-align:center; font-weight:bold; }
.dropviewer #viewswitcher .current    { border:4px solid #900; background:white; color:#900; }

.dropviewer #dv_moviecontrols,
.dropviewer #tc_moviecontrols { margin-bottom:10px; }
.dropviewer #dv_moviecontrols span,
.dropviewer #tc_moviecontrols span { height:60px; width:60px; display:inline-block; font-size:0; color:transparent;
										background-image:url(../images/icons/dropviewer/moviecontrols.png); background-position:0 0; }
.dropviewer #dv_moviecontrols span#dv_first,
.dropviewer #tc_moviecontrols span#tc_first { background-position:0 -300px; }
.dropviewer #dv_moviecontrols span#dv_next,
.dropviewer #tc_moviecontrols span#tc_next { background-position:0 -120px; }
.dropviewer #dv_moviecontrols span#dv_playstop,
.dropviewer #tc_moviecontrols span#tc_playstop { background-position:0 0; }
.dropviewer #dv_moviecontrols span#dv_playstop.playing,
.dropviewer #tc_moviecontrols span#tc_playstop.playing { background-position:0 -60px; }
.dropviewer #dv_moviecontrols span#dv_prev,
.dropviewer #tc_moviecontrols span#tc_prev { background-position:0 -180px; }
.dropviewer #dv_moviecontrols span#dv_last,
.dropviewer #tc_moviecontrols span#tc_last { background-position:0 -240px; }
.dropviewer #dv_moviecontrols span#dv_nav,
.dropviewer #tc_moviecontrols span#tc_nav { background-position:0 -360px; }

#dv_config_handedness { text-align:center; }
#dv_config_handedness #dv_config_lh, 
#dv_config_handedness #dv_config_rh { display:inline-block; padding:0.25em; border:1em solid transparent; margin:1em; cursor:pointer; }

.dropviewer #dropnav { height:95%; }
.dropviewer #dropnav td { }
.dropviewer #dropnav td.dropnav_well { position:relative;top:0;left:-2px;border:3px solid #999;padding:0;background:#ccc; }
.dropviewer #dropnav td.dropnav_wellcurrent { border:3px solid #900; }
.dropviewer #dropnav td.dropnav_well div { position:absolute;top:0;left:0;right:0;bottom:0; cursor:pointer;}
.dropviewer #dropnav td.dropnav_well img { max-width:100%;max-height:96%;line-height:100%; }
.dropviewer #dropnav td div.navdrop { text-align:center;line-height:150%;position:absolute;cursor:pointer;background:#bb9; margin:1%; color:white; text-shadow:1px 1px 1px black; }
.dropviewer #dropnav th.droppicker { background-color:#ccc;color:black;border-radius:0 50% 50% 50%; cursor:pointer; } 
.dropviewer #dropnav th.droppickerempty { background-color:#ddd;color:#fff;border-radius:0 50% 50% 50%; } 
.dropviewer #dropnav th.droppickercurrent { background-color:#333;color:white;border-radius:0 50% 50% 50%; } 
.dropviewer #dropnav .empty { background:#999; opacity:0.3; }
.dropviewer #dropnav .empty  div { display:none;  }
.dropviewer #dropnav_compare { border:1px solid black; background-color:#ccc; }
.dropviewer #dropnav_compare img { margin-bottom:0.25em; }
.dropviewer #dropnav_compare div { border:2px transparent; }
.dropviewer #dropnav_compare div.dropnav_wellcurrent { border:2px solid #900; }
.dropviewer #dropnav_compare div+div { margin-left:0.2em; }
.dropviewer .dropnav_comparelabel { display:none; }
.dropviewer #dropnav_compare .dropnav_comparelabel { display:block; text-align:center; font-weight:bold;  }

.dropviewer #selectpanel{ position:absolute; top:0; bottom:0; left:0; right:0; }
.dropviewer #selectpanel a { color:#ccc; }

.dropviewer #selectpaneltabs { position:absolute; top:3em; bottom:0; left:0; right:0;  }
.dropviewer #selectpaneltabs h3 { float:left; padding:.5em 1em; border:2px solid #ccc; color:#ccc; background-color:#333;  margin-bottom:-2px; cursor:pointer; border-radius:0.5em 0.5em 0 0; }
.dropviewer #selectpaneltabs h3.current { color:#333; background-color:#ccc; }
.dropviewer #selectpaneltabs div.infopanel { position:absolute; border:2px solid #ccc; background:black; color:white; clear:both; padding:0.5em; bottom:0; left:0; right:0; top:2.75em; overflow:auto; }
.dropviewer #selectpaneltabs h4 { margin-top:1em; }
.dropviewer #selectpaneltabs td input[type=text] { width:3em; }

.dropviewer #selectpanel #crystalnotesadd textarea { height:7.5em; margin: 0.25em 2%; width:96%; }
.dropviewer #selectpanel #crystalnotesadd input   { width:30%; margin-left:68%; }

.lefthanded .dropviewer #imagepane { left:440px; right:0; }
.lefthanded .dropviewer #controls { right:420px; left:0;  }
.lefthanded .dropviewer .dv_score { border-left:none; border-right:20px solid transparent; }

/* Small-screen drop viewer defaults - assume portrait, override for landscape below */
@media screenDONOTUSE and (max-width:65em) {
	:root { --icebear-smallscreen-isportrait:1; }
	.smallscreenviewer {  } /* div#container and div#content restyled to fit whole screen, in SmallScreenDropViewer.init, and this class applied to #content */
	.smallscreenviewer #ssimagepane { 
		position:absolute; top:0;left:0; right:0; bottom:4.1cm; 
		background-color:black; color:white; 
	} 
	.smallscreenviewer #ssimagepane img { width:100%; } 
	.smallscreenviewer #sscontrols { 
		position:absolute; bottom:0;left:0; right:0; min-height:4cm; min-width:auto;
	} 
	.dropviewer #controls,
	.dropviewer #dv_moviecontrols,
	.dropviewer #tc_moviecontrols { display:none !important; }
	
	.smallscreenviewer #sscontrols .sscontrol { 
		cursor:pointer; position:absolute; border:1px solid white; background:black; color:white;
		text-align:center; vertical-align:middle; font-size:1.2cm; display:table-cell; 
	} 
	.smallscreenviewer #sscontrols #ssnav   { top:0; bottom:50%; left:0; width:20%; }
	.smallscreenviewer #sscontrols #ssscore { bottom:0; top:50%; left:0; width:20%; }
	.smallscreenviewer #sscontrols #ssprev  { top:0; bottom:50%; right:20%; width:20%; }
	.smallscreenviewer #sscontrols #ssfirst { bottom:0; top:50%; right:20%; width:20%; }
	.smallscreenviewer #sscontrols #ssnext  { top:0; bottom:50%; right:0; width:20%; }
	.smallscreenviewer #sscontrols #sslast  { bottom:0; top:50%; right:0; width:20%; }
	.smallscreenviewer #sscontrols #ssplay  { top:0; bottom:0; right:40%; left:20%; font-size:2.4cm; line-height:150%; color:#0f0; }
		
	.ssnavitem { 
		position:absolute; background-color:black; color:white; border:2px solid white;   
		vertical-align:baseline; display:table-cell; text-align:center; font-size:1cm; 
	} 
}

/* Small-screen drop viewer in landscape */
@media screenDONOTUSE and (max-width:65em) and (min-aspect-ratio:1/1){
	:root { --icebear-smallscreen-isportrait:0; }
	.smallscreenviewer #ssimagepane { 
		position:absolute; top:0;left:0; bottom:0; right:4.1cm; 
		background-color:black; color:white; 
	} 
	.smallscreenviewer #ssimagepane img { height:100%; } 
	.smallscreenviewer #sscontrols { 
		position:absolute; top:0; bottom:0; right:0; left:auto; height:auto; min-height:auto; min-width:4cm;
	} 

	.smallscreenviewer #sscontrols #ssnav   { bottom:0; left:0; right:auto; top:auto; width:50%; height:20%; }
	.smallscreenviewer #sscontrols #ssscore { bottom:0; right:0; left:auto; top:auto; width:50%; height:20%; }
	.smallscreenviewer #sscontrols #ssnext  { top:20%; width:50%; right:0; height:20%; }
	.smallscreenviewer #sscontrols #ssprev  { top:20%; width:50%; left:0; height:20%; }
	.smallscreenviewer #sscontrols #sslast  { top:0; width:50%; right:0; height:20%; }
	.smallscreenviewer #sscontrols #ssfirst { top:0; bottom:auto; left:0; width:50%; height:20%; }
	.smallscreenviewer #sscontrols #ssplay  { top:40%; bottom:20%; right:0; left:0; }

}


/************************
 * PLATE WIDGET styles
 ************************/

div.platewidget { position:absolute; top:0.5em; bottom:0.5em; right:0.5em; left:0.5em; }
div.platewidget table.pw_plate { }
div.platewidget table.pw_plate tr { }
div.platewidget table.pw_plate tr th { }
div.platewidget table.pw_plate td.pw_well { position:relative; top:0; left:-2px; border:3px solid #999; padding:0; background:#ccc; }
div.platewidget table.pw_plate td.pw_empty { background:#999; opacity:0.3; }
div.platewidget table.pw_plate td.pw_current { border:3px solid #900; }
div.platewidget table.pw_plate td.pw_well div.pw_drop { position:absolute;top:0;left:0;right:0;bottom:0; cursor:pointer; display:none; }
div.platewidget table.pw_plate td.pw_well div.pw_current { display:block; } 
div.platewidget table.pw_plate td.pw_well img { max-width:100%;max-height:96%;line-height:100%; }
div.platewidget table.pw_droppicker { background-color:#ccc; border:3px solid black; border-radius:1em; height:8em; width:8em; margin:0 0.5em 0.5em 0; }
div.platewidget table.pw_droppicker td { background-color:white; color:black; border:3px solid #666; vertical-align:middle; text-align:center; border-radius:1em; font-weight:bold; cursor:pointer; }
div.platewidget table.pw_droppicker td.pw_reservoir { opacity:0; cursor:default; }
div.platewidget table.pw_droppicker td.pw_current { background-color:black; color:white; border-color:black; }
div.platewidget table.pw_droppicker td.pw_empty { background-color:#ccc; color:#999; border-color:#999; cursor:default; }


/************************
 * CRYSTAL FISHING styles
 ************************/

#fishinggrid #scanbox 	{ position:absolute; top:1%; left:1%; width:42%; height:15% }
#fishinggrid #trashbox	{ position:absolute; top:1%; left:44%; width:17%; height:15%; }
#fishinggrid #platebox  { position:absolute; top:18%; left:1%; width:60%; height:80%; }
#fishinggrid #pinsbox   { position:absolute; top:1%;  left:62%; height:97%; width:18%; }
#fishinggrid #pucksdewarsbox { position:absolute; top:1%;  left:81%; height:97%; width:18%; }
#fishinggrid #pucksbox  { position:absolute; top:0;  left:0; right:0; max-height:58%; padding:0.25em; overflow:auto }
#fishinggrid #dewarsbox { position:absolute; bottom:0;  left:0; right:0; max-height:38%; padding:0.25em; overflow:auto }
#fishinggrid #scanbox input[name=barcode] { width:98%; font-size:1.5em; margin:0.25em; }

div.fish_container { 
	position:relative; line-height:2em; font-size:120%; font-weight:bold;
	border:2px solid; border-color:var(--labelTextColor); padding:.25em .25em .25em 65px; border-radius:.25em; margin:.25em;
	background:var(--labelBackground); background-image:url(../images/icons/darkicons/containers.png); background-repeat:no-repeat;
}
.lighticons .fish_container {
	background-image:url(../images/icons/lighticons/containers.png);
}
div.fish_pin { 	background-position:0 0; }
div.ship_puck,
div.fish_puck { background-position:0 -100px; }
div.fish_dewar { background-position:0 -200px; }
div.fish_container.droppable { background-color:#cfc; }
div.fish_container.activedroppable { background-color:#ffc; }
span.fish_contentcount { float:right; cursor:pointer; }
span.fish_contentcount span { font-weight:normal;font-size:80%; }
div.fish_full { background-color:var(--errorBackgroundColor); }
div.fish_full span.fish_contentcount span { color:var(--errorTextColor); }
div.fish_pin span.fish_contentcount { position:absolute; top:0; right:.25em; height:100%; width:50px; display:block; }
div.fish_pin.hascrystal span.fish_contentcount { background-image:url(../images/icons/darkicons/containers.png); background-repeat:no-repeat; background-position:0 -300px; }
.lighticons div.fish_pin.hascrystal span.fish_contentcount { background-image:url(../images/icons/lighticons/containers.png); }

div.fish_xtalcount { position:absolute; top:15%; left:15%; bottom:15%; right:15%; line-height:100%; }
div.fish_xtalcount span { display:inline-block; position:absolute; top:0; left:0; width:100%; height:100%; font-size:125%; text-align:center; background-color:black; color:white; vertical-align:middle; font-weight:bold; border-radius:.75em; }
div.fish_xtalcount span:empty { display:none; }

div.fish_xtaldrag { position:absolute; top:0; left:0; bottom:0; right:0; background:url(../images/icons/darkicons/containers.png) center -300px no-repeat; opacity:0; cursor: pointer; }
div.xtal_fished div.fish_xtaldrag,
div.xtal_shipped div.fish_xtaldrag,
div.xtal_collected div.fish_xtaldrag,
div.xtal_deposited div.fish_xtaldrag { cursor: not-allowed; }

div.fish_xtaldrag.dragging { opacity:1; animation:.5s linear 0s fish_fadein; -webkit-animation:.5s linear 0s fish_fadein; }
div.fish_droppable,
td.fish_droppable { background-color:var(--dragDropDroppableBackgroundColor); background-repeat: no-repeat; }
div.fish_droppable .boxbody { background:var(--dragDropDroppableBackgroundColor); }
div.fish_activedroppable,
td.fish_activedroppable { background-color:var(--dragDropActiveDroppableBackgroundColor);  }
div.fish_activedroppable .boxbody { background-color:var(--dragDropActiveDroppableBackgroundColor); }
div.fish_activedroppable * { pointer-events:none; }
div.fish_draggingcontainer { opacity:0.4; }
div#fish_dragimage { z-index:-1; height:50px; width:50px; background:white url(/images/icons/darkicons/containers.png) no-repeat 0 -300px; position:absolute; top:10px; left:10px; border-radius:6px; }
div#fish_dragimage.fish_dragging { z-index:9999; position:static; }
div#fish_dragimage.fish_crystal { background-position:0 -300px;}
div#fish_dragimage.fish_pin     { background-position:0 0;   }
div#fish_dragimage.fish_puck    { background-position:0 -100px;}
div#fish_dragimage.fish_dewar   { background-position:0 -200px;}

div.fish_pininpuck { 
	border-radius:0.2em; margin:0.25em; width:40%; font-size:120%; border:1px solid #333; background:#333 none 0 0;
	color:#ccc; padding:0 0.5em; min-width:10em; display:inline-block; cursor:move;
}

div.fish_updated { animation:1s linear 0s fish_flash; -webkit-animation:1s linear 0s fish_flash; }

div.fish_dropimage { position:absolute; top:0; bottom:0; left:0; right:0; height:100%; width:100%; background:#eee; }
div.fish_dropimage img { position:absolute; top:0; left:0; height:100%; cursor:crosshair; }
div.fish_hascondition { bottom:2.5em; height: auto; }
div.fish_condition { position:absolute; bottom:0; height:2.5em; left:0; right:0; background:#ccc; line-height:2.5em; 
					 font-weight:bold; padding-left:1em; }


div.fish_containercategory { text-align:center; } 
div.ship_containertype, 
div.fish_containertype { 
	border:0.5em solid #666; border-radius:1em; height:8em; min-width:15em; text-align:center; display:inline-block; margin:1em; 
}
div.ship_containertype { height:4em; }

div.ship_containertype .ship_containertypename,
div.fish_containertype .fish_containertypename {
	background-image: url(../images/icons/darkicons/containers.png);  background-repeat: no-repeat;
  font-size: 120%; font-weight: bold; line-height: 3em; margin: 1.5em 1em 0 1em; padding-left: 3.5em; text-align: left;
}
div.ship_containertype .ship_containertypename {
	margin:0.5em;
}
header #undobutton { float:right; margin-right:1em; width:10em; position:relative;top:0.5em; color:white; background-color:red; cursor:pointer; }


@-webkit-keyframes fish_flash {
	0%   { background-color:#ff0; }
	100% { background-color:#ccc; }
}@keyframes fish_flash {
	0%   { background-color:#ff0; }
	100% { background-color:#ccc; }
}@-webkit-keyframes fish_fadein {
	0%   { opacity:0; }
	100% { opacity:1; }
}@keyframes fish_fadein {
	0%   { opacity:0; }
	100% { opacity:1; }
}

/**********************
 * SHIPPING styles
 **********************/

#shipmentdetails_body { }
#shipmentdetails_form { position:absolute; top:1%; left:1%; width:48%;  }
#shipmentactions_form { position:absolute; top:1%; right:1%; width:48%;  }

#shipment_datacollection {}

#shipment_datacollection_body .dccompletedpuck	 { border:var(--boxAndTabBorder); border-width:0.25em; border-color:var(--completedTextColor); color:var(--completedTextColor); background:#cfc url(../images/icons/lighticons/yes.gif) no-repeat right bottom; background-size:50px; }
#shipment_datacollection_body .dccurrentpuck	 { border:var(--boxAndTabBorder); border-width:0.25em; background:var(--boxAndCurrentTabHeaderBackgroundColor); color:var(--boxAndCurrentTabHeaderTextColor); }

#shipment_datacollection_body label.pinnumber    { float:right; font-weight:bold; text-align:center; width:7em; height:4em; position:relative; }
#shipment_datacollection_body label.pinnumber span.label { display:inline-block; position:absolute; top:0;left:0; height:100%; width:100%; line-height:100%; vertical-align:middle; text-align:center; font-size:4em;}
#shipment_datacollection_body label.xtaldetails  { margin-right:8.4em; height:4em; text-align:left; font-weight:bold;  }
#shipment_datacollection_body label.xtaldetails span.label { float:right; text-align:right; border-radius:0.7em; }
#shipment_datacollection_body label.xtaldetails+label  { clear:both; margin-top:0.2em; }

.shipment_crystalaction_kept,
.shipment_crystalaction_keep,
.shipment_crystalaction_wash,
.shipment_crystalaction_ask  { padding: 0.25em; border-radius:0.25em; font-weight: bold; }
.shipment_crystalaction_kept { background-color:var(--infoBackgroundColor); color:var(--infoTextColor); }
.shipment_crystalaction_keep { background-color:var(--completedBackgroundColor); color:var(--completedTextColor); }
.shipment_crystalaction_wash { background-color:var(--errorBackgroundColor); color:var(--errorTextColor); }
.shipment_crystalaction_ask  { background-color:var(--warningBackgroundColor); color:var(--warningTextColor); }



.xtal_crosshair { position:absolute; top:-20%; left:-20%; height:50px; width:50px; z-index:999; cursor:crosshair; display: block; }
.xtal_crosshair .xtal_cross { position:absolute;top:0; left:0; border:none; }
.xtal_crosshair .xtal_crossx { position:absolute;top:-5px; left:24px; height:60px; width:1px; border:none; border-left:2px solid #00f; }
.xtal_crosshair .xtal_crossy { position:absolute;top:24px; left:-5px; height:1px; width:60px; border:none; border-top:2px solid #00f; }
.xtal_crosshair .xtal_ring { cursor:pointer; position:absolute;top:0; left:0; height:46px; width:46px; border:2px solid #00f; border-radius:25px; }
.xtal_crosshair .xtal_number { position:absolute; bottom:-10px; right:-10px; padding:0 0.25em; border:2px solid #00f; color:#00f; background:white; opacity:0.7; }

.xtal_currentcrosshair .xtal_crossx { border-left-width:4px; }
.xtal_currentcrosshair .xtal_crossy { border-top-width:4px; }
.xtal_currentcrosshair .xtal_ring   { border-width:4px; top:-1px; left:-1px; box-shadow: -2px 2px 4px 3px rgba(128,0,0,0.3), -2px 2px 4px 3px rgba(128,0,0,0.3) inset;}
.xtal_currentcrosshair .xtal_number   { border-width:3px; }

.xtal_crosshairfromdifferentimage .xtal_crossx { border-left-style: dashed; }
.xtal_crosshairfromdifferentimage .xtal_crossy { border-top-style: dashed; }
.xtal_crosshairfromdifferentimage .xtal_ring { border-style: dashed; }

.xtal_fished .xtal_crossx,
.xtal_fished .xtal_crossy,
.xtal_fished .xtal_ring,
.xtal_fished .xtal_number { border-color: #0c0; color:#0c0; }

.xtal_shipped .xtal_crossx,
.xtal_shipped .xtal_crossy,
.xtal_shipped .xtal_ring,
.xtal_shipped .xtal_number { border-color: #c60; color:#c60; }

.xtal_collected .xtal_crossx,
.xtal_collected .xtal_crossy,
.xtal_collected .xtal_ring,
.xtal_collected .xtal_number { border-color: #f00; color:#f00; }

.xtal_deposited .xtal_crossx,
.xtal_deposited .xtal_crossy,
.xtal_deposited .xtal_ring,
.xtal_deposited .xtal_number { border-color: #f0f; color:#f0f; }