html {height:100%;}

body {font-size:8pt; font-family: Verdana,Helvetica, sans-serif,Arial ;margin: 0;
      min-height:100%;height:100%;padding: 0;background: #c8c8c8;overflow:auto;}

div    {vertical-align:top;margin:0;padding:0;}
a img  {border-style:none;}
table  {font-size:8pt;}
h1     {font-size:10pt; border-bottom:1px dotted black;margin:0px 5px 0px 5px;} 
h2     {font-size:10pt;margin:5px 0 0 10px;}
h3     {font-size:8pt;}

iframe { width:100%; height:100%; border:0px;background:#c8c8c8;} 

div.treeview ul {list-style-position: outside;}
div.treeview a	{text-decoration:none;}
ul.root		{margin:0;list-style-type:none;text-indent:0px;padding: 0 0 0 0;}
ul.folder	{list-style-type:none;text-indent:0px;margin :0 0 0 16px;padding: 0 0 0 0;}
ul.tables	{list-style-image: url(table.gif);}
ul.queries	{list-style-image: url(file.gif);}
ul.files	{list-style-image: url(file.gif);}
ul.system	{list-style-image: url(file.gif);}
ul.requests	{list-style-image: url(file.gif);}
ul.reports	{list-style-image: url(file.gif);}

P.pagebreakhere {page-break-after :always}

div.screen {display:none; margin: 0 0 0 0; padding: 0 0 0 0; width:100%; }
div.frame	{border:1px dotted black;}
div.mainframe {padding : 10px 0 0 10px; }
div.border	
{
	overflow: auto;
	border-bottom: 1px solid #b8b8b8;
	border-right: 1px solid #b8b8b8;
	border-top: 2px solid #b8b8b8;
	border-left: 2px solid #b8b8b8;
	margin:10px 10px 10px 0px;
	padding:10px 10px 10px 10px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}

div.buttons 	{margin:10px 10px 10px 10px;}

input.border	{margin:10px 10px 10px 10px;}
input.invalid	{background:red;}

div.wizardstep {border:1px solid gray;
		text-align: center;
		margin:1px 1px 1px 1px;
		background: #c1c8c8;
		padding:1px 1px 1px 1px;}
div.wizardstep a{text-decoration:none;}

p.failure       {color:red;}
p.success       {color:green;}

#upperheader {height:90px;overflow:hidden;}
#upperheader table.header {table-layout:fixed;}

#upperheader td          {background: #c8c8c8;color:white; margin: 0 0 0 0; padding: 0 0 0 0;}
#upperheader td.upper    {background: #000;margin:0 0 0 0;height:40px; }
#upperheader td.left     {background: black url(header.gif) 100% 100% repeat-x;height:60px;margin:0 10 0 0;font-size:10pt;}
#upperheader td.middle   {background: black url(headerconn.gif) 100% 100% no-repeat;height:40px;}
#upperheader td.right    {background: #c8c8c8 url(header.gif) 100% 100% repeat-x;height:40px;}

#upperheader td.right a { font-size:8pt;text-decoration: none;color: #c8c8c8;padding: 0px 4px 0px 6px;
         border-left: 1px dotted white;}
#upperheader td.right a:hover {color: white;}
#upperheader td.right a.current {color: red }

#upperheader td.lang {border-bottom: 1px dotted black; height:20px; }
#upperheader td.lang p {float: right;padding: 0px 2px 0px 2px;margin: 0 0 0 0;color:black;}
#upperheader td.lang a {padding: 2px 2px 0px 2px;float: left;}

#upperheader td.serverdate {border-bottom: 1px dotted black; height:20px; color:black;}


#upperheader td.logout {border-bottom: 1px dotted black;}
#upperheader td.logout a {text-decoration: none;color: black;padding: 0 5px 0;}
#upperheader td.logout a:hover {color: white; background: #000;}


#module {font-size:10pt;display: block;overflow:hidden;left: 0; right :0; bottom:0;}

table#modules 	{width:100%;}
th.menu		{background: #000;color:white;text-align:left;padding: 2px 3px 2px 10px;}
th.menu 	a {text-decoration: none;color: #c8c8c8;border-right: 1px dotted white;padding: 0 5px 0 2px;}
th.menu 	a:hover {color: white;}
th.menu 	a.current {color: red ;}

td.no_wrap	{white-space: nowrap;}

td#panelleft		{width:160px;padding:10px 0 0 20px;vertical-align:top;border-right:1px dotted black;}
td#panelright		{padding:10px 0 0 20px;vertical-align:top;}



#login  {position: absolute;top: 20%; bottom:10%; left: 30%; right:30%;text-align:center;}

#footer {
	background: black;
        position: fixed;
        width: 100%;
        height: 20px;
        top: auto;
        right: 0;


      }
#footer p {font-size: small;font-weight:bold;color:#ffffff;text-align:center;	margin: 0px 0 0px 0px;}



#welcome {width:50%;margin: auto auto;}


table.info		{border-spacing: 0 0;border-collapse:collapse;width:95%;white-space:nowrap;}


table.data		{position: relative;border-spacing: 0 0;border-collapse:collapse;width:95%;}
table.data th 		{background:gray;border:black 1px solid;}
table.data td		{border:1px solid black;margin:0 0 0 0;padding: 0 0 0 0;}

table.data tr.even   	{background:#c8c8c8; }
table.data tr.odd     	{background:white;}
table.data tr.wrn     	{background:yellow;}


table.data tr.even input[type=text]  {background:#c8c8c8; }
table.data tr.odd  input[type=text]   {background:white;}
table.data tr.wrn  input[type=text] 	{background:yellow;}
table.data tr.clickable { cursor: pointer;}


#pages			{color:black; text-align: center;}



div.user 		{cursor:hand;float:left; height: 60px; width: 60px;border:1px dotted black;
			margin: 5px 5px 5px 5px;padding: 5px 5px 5px 5px;text-align:center; }
div.user:hover		{border:1px solid orange;}


div.usergroup		{margin: 2px 20px 5px 20px;padding: 0px 0px 0px 0px; vertical-align:middle;}
div.usergroup div	{cursor:hand; height: 32px; border:1px dotted black;  }
div.usergroup div:hover	{border:1px solid orange;}
div.usergroup div img   {vertical-align:top;}
div.usergroup	table	{margin: 2px 0px 0px 40px;}

div.usergroup table tr.level0 {border:1px solid black;background:#ffffff;}


div.groupdetails	{border:1px solid black; margin: 0 0px 0 40px; padding:0 0 0 0;}
div.absolute {position: absolute;top:20%;left:10%;width:80%;border:2px dotted black; padding:5% 0 5% 5%;}
div.info		{ color:red;font-weight:bold;text-align:center;}
div.info table {width:95%; border:1px solid black; margin:0; color:white;text-align:left}
div.info tr.request_style_0{background:green;}
div.info tr.request_style_1{background:red;}
div.info tr.request_style_2{background:yellow; color:black;}
div.info tr.request_style_9{color: black;}

div.addinfo 		{text-align:center;}

table.noborder		{border-spacing: 0 0;border-collapse:collapse;}
table.noborder	td 	{border:0px;margin:0 0 0 0;padding: 0 0 0 0;}

div.info table.noborder {border:0px;}

div#headerleft  {width:200px;float:left;color:white;text-align:center;
                    border-right:1px dotted white;height:16px; background:#000;}
div#headerright {right:0px;height:16px; background:#000;padding-right:15px;}
div#headerright a {}
div#headerright a {text-decoration: none;color: #c8c8c8;padding: 0px 4px 0px 6px;
                    border-right: 1px dotted white;}
div#headerright a:hover {color: white;}
div#headerright a.current {color: red }


div#dataleft 	{position:absolute; bottom:0;left:0px;top:110px; width:200px;
			        overflow:auto;border-right:1px dotted black;white-space: nowrap; visibility: hidden;}
div#dataright	{position:absolute;left:200px;top:110px ; right:0px;bottom:0px;
                overflow:hidden;padding: 0 0 0 0;}

span.note	{color:red;font-style:italic;font-size:smaller;}

select.editable, input.editable {
    width: 15em;
}

option.activateEdit {
    font-style : italic;
    color : #800;
}

div.warning_shown {
	display: block; 
	border: solid 1px #acacac; 
	background: #7d7d7d;
	text-align:center;
	margin:10px 10px 10px 0px;
	padding:10px 10px 10px 10px;
}

div.warning_hidden {display: none; }

span.warning {
	font-size:10pt;
	color:white;
	font-weight:bold;
	text-align:center;
}

td.level0		{padding: 0 0 0 0px;}
td.level1		{padding: 0 0 0 20px;}
td.level2		{padding: 0 0 0 40px;}
td.level3		{padding: 0 0 0 60px;}

div.dispenser_monitor {
	padding : 10px 5px 5px 10px;
}

div.dispenser_idle {
	float: left;
	border-bottom: solid 3px #888888;
	border-right: solid 3px #888888;
	border-top: solid 2px #888888;
	border-left: solid 2px #888888;
	padding : 5px 5px 5px 5px;
	margin: 5px 5px 5px 5px;
	background: #d2d2d2;
}

div.dispenser_released{
	float: left;
	border-bottom: solid 3px #888888;
	border-right: solid 3px #888888;
	border-top: solid 2px #888888;
	border-left: solid 2px #888888;
	padding : 5px 5px 5px 5px;
	margin: 5px 5px 5px 5px;
	background: #00ff00;
}

div.dispenser_fuelling{
	float: left;
	border-bottom: solid 3px #888888;
	border-right: solid 3px #888888;
	border-top: solid 2px #888888;
	border-left: solid 2px #888888;
	padding : 5px 5px 5px 5px;
	margin: 5px 5px 5px 5px;
	background: #ffba00;
}

div.dispenser_error {
	float: left;
	border-bottom: solid 3px #888888;
	border-right: solid 3px #888888;
	border-top: solid 2px #888888;
	border-left: solid 2px #888888;
	padding : 5px 5px 5px 5px;
	margin: 5px 5px 5px 5px;
	background: #FF0909;
}

div.dispenser_reached_zero_fuelling {
	float: left;
	border-bottom: solid 3px #888888;
	border-right: solid 3px #888888;
	border-top: solid 2px #888888;
	border-left: solid 2px #888888;
	padding : 5px 5px 5px 5px;
	margin: 5px 5px 5px 5px;
	background: #5555EE;
}

div.dispenser_reached_over_fuelling {
	float: left;
	border-bottom: solid 3px #888888;
	border-right: solid 3px #888888;
	border-top: solid 2px #888888;
	border-left: solid 2px #888888;
	padding : 5px 5px 5px 5px;
	margin: 5px 5px 5px 5px;
	background: #000066;
}


div.dispenser_data {
	border-bottom: solid 1px #888888;
	border-right: solid 1px #888888;
	border-top: solid 2px #888888;
	border-left: solid 2px #888888;
	background: #d2d2d2;
	padding : 5px 5px 5px 5px;
	margin: 5px 5px 5px 5px;
}

td.dispenser_data {
	text-align: right;
	border: solid 1px black;
	border-bottom: solid 1px #888888;
	border-right: solid 1px #888888;
	border-top: solid 2px #888888;
	border-left: solid 2px #888888;
	padding : 2px 5px 2px 15px;
}

div.dispenser_button_enabled {
	border-bottom: solid 2px #888888;
	border-right: solid 2px #888888;
	border-top: solid 1px #686868;
	border-left: solid 1px #686868;
	padding : 2px 5px 2px 5px;
	margin: 2px 5px 2px 5px;
	background: #c2c2c2;
	text-align: center;
	cursor:pointer;
	width: 70%;
}

div.dispenser_button_enabled:hover{
	border-bottom: solid 2px #989898;
	border-right: solid 2px #989898;
	border-top: solid 1px #686868;
	border-left: solid 1px #686868;
	padding : 2px 5px 2px 5px;
	margin: 2px 5px 2px 5px;
	background: #c9c9c9;
	text-align: center;
	cursor:pointer;
	width: 70%;
}

div.dispenser_button_disabled {
	border-bottom: solid 1px #989898;
	border-right: solid 1px #989898;
	border-top: solid 2px #a1a1a1;
	border-left: solid 2px #a1a1a1;
	padding : 2px 5px 2px 5px;
	margin: 2px 5px 2px 5px;
	background: #e2e2e2;
	color:  #c8c8c8;
	text-align: center;
	width: 70%;
}

div.legend_title {
	padding : 2px 5px 2px 5px;
	margin: 10px 5px 2px 5px;
	cursor:pointer;
	font-weight:bold;
	background: #c2c2c2;
}

div.legend_content {
	position: absolute;
	visibility: hidden;
	margin: 0;
	padding: 0;
	background: #EAEBD8;
	border: 1px solid #5970B2;
	font-weight:bold;
	opacity: 0.85;
	filter:Alpha(opacity=85);
}

table.buttons {
	min-width: 200px;
	max-width: 350px;
	border-collapse: collapse;
}

div.sheet_visible{
	position: absolute;
	visibility: visible;
	background: #FFFFFF;
	height:297mm;
	width:210mm;
	top: 0;
	left: 0;
	z-index: 150;
}
div.sheet_hidden
{
	position: absolute;
	visibility: hidden;
}

div.sheet_instruction
{
	position: absolute;
	top: 0;
	left: 0;
}

div.border_hidden {
	position: absolute;
	visibility: hidden;
	left: 0px;
	top: 0px;
}

div.border_shown {
	position: absolute;
	visibility: visible;
	margin: 0;
	padding: 0;
	background: #090909;
	left: 0px;
	top: 0px;
	z-index:150;
}

div.inner_hidden{
	visibility: hidden;
}

div.inner_shown{
	border: solid 1px #888888;
	background: #d2d2d2;
	padding : 5px 5px 5px 5px;
	margin: 5px 5px 5px 5px;
	z-index:200;
}

div.datetime_button {
	border-bottom: solid 2px #888888;
	border-right: solid 2px #888888;
	border-top: solid 1px #686868;
	border-left: solid 1px #686868;
	padding : 2px 5px 2px 5px;
	margin: 10px 5px 20px 5px;
	background: #c2c2c2;
	text-align: center;
	cursor:pointer;
	width: 200px;
	float: right;
}

div.level_info{
	background: #00FF00;
	color: black;
	font-family: monospace;
}

div.level_debug{
	background: #FFFF00;
	color: black;
	font-family: monospace;
}

div.level_warning{
	background: #FF8000;
	color: black;
	font-family: monospace;
}

div.level_error{
	background: #FF0000;
	color: black;
	font-family: monospace;
}

div.level_critical{
	background: #000000;
	color: white;
	font-family: monospace;
}



div.barcode_horizontal 
{
	color: black;
	background-color: white;
	font-size: 12px;
	padding: 0 0 0 0;
	margin: 0 0 0 0;
	overflow: hidden;
}

div.barcode_vertical
{
	color: black;
	background-color: white;
	font-size: 12px;
	padding: 0 0 0 0;
	margin: 0 0 0 0;
	overflow: hidden;

	-moz-transform-origin: 0% 0%;
	-webkit-transform-origin:0% 0%;
	-o-transform-origin:0% 0%; 
	-ms-transform-origin:0% 0%; 
	transform-orgin:0% 0%;

	-webkit-transform: rotate(-90deg) translateX(-100%);
	-moz-transform: rotate(-90deg) translateX(-100%);
	-ms-transform: rotate(-90deg) translateX(-100%);
	-o-transform: rotate(-90deg) translateX(-100%);
	transform: rotate(-90deg) translateX(-100%);

}

div.horizontal div.HRI
{
	clear: left;
	font-family: "Courier New", monospace;
	font-size: 8px;
	text-align: center;
	padding: 0 0 0 0;
	margin: 0 0 0 0;
	background-color: white;
}

div.vertical div.HRI
{

	font-family: "Courier New", monospace;
	font-size: 8px;
	text-align: center;
	padding: 0 0 0 0;
	margin: 0 0 0 0;
	background-color: white;
	position:relative;
	left:104px;
	top:-360px;

	width:12px;
	height:180px;
}

div.horizontal div.description
{
	/*height: 64px;
	width: 180px;
	*/
	clear: left;
	text-align: center;
	background-color: white;
	padding: 4px 4px 4px 4px; 
	margin: 0 0 0px 0;
}

div.vertical div.description
{
	/*width: 64px;
	height: 180px;
	*/
	text-align: center;
	background-color: white;

	position:relative;

}

div.description_text
{
	clear: left;
	text-align: center;
	background-color: white;
	word-wrap: break-word;
	padding: 0 0 0 0;
	margin: 0 0 0 0;
}

div.horizontal div.description_text
{
	/*height: 64px;
	width: 180px;
	*/
	clear: left;
	text-align: center;
	background-color: white;
	word-wrap: break-word;
	padding: 0 0 0 0;
	margin: 0 0 0 0;
}

div.vertical div.description_text
{
	/*height: 64px;
	width: 180px;
	top:65px;
*/
	text-align: center;
/*	left:-65px;
*/
	word-wrap: break-word;

	position:relative;
	-webkit-transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	transform: rotate(-90deg);
}

div.horiziontal div.bardata
{
	position: relative;
	left: 0;
	clear: left;
	padding: 0 0 0 0;
	margin: 0 0 0 0;
}

div.vertical div.bardata
{
	position:relative; 
	/*left:60px; 
	
	top:-180px;

	*/
	padding: 0 0 0 0;
	margin: 0 0 0 0;

}

div.EAN13barcode
{
	color: black;
	position: relative;


	left: 0cm;
	top: 0cm;


	width: 115pt;
	float: none;
	clear: left;
	font-size: 12px;
	margin: 0 0 0 0;
}

div.EAN13bardata
{
	position: relative;
	left: 0;
	clear: left;
	padding: 1pt 10pt 1pt 10pt;
	margin: 0 0 0 0;
}

div.EAN13bitOn
{
         float: left;
         height: 25px;
        width: 0px;
	border-left: 1pt solid black;
	border-right: 0;
	padding: 0 0 0 0;

         background-color: #000000;
}
      
div.EAN13bitOff
{
         float: left;
         height: 25px;
         width: 0px;
	border-left: 1pt solid white;
	border-right: 0;
	padding: 0 0 0 0;
	
         background-color: #FFFFFF;
}

div.EAN13barcode div.HRI
{
	float: left;
	clear: left;
}


div.level_audit{
	background: #00FFFF;
	color: black;
	font-family: monospace;
}

div.level_boot{
	background: #00AAAA;
	color: black;
	font-family: monospace;
}

div.level_info:hover{
	border-top: 1px solid black;
	border-left:1px solid black;
	border-right:2px solid black;
	border-bottom:2px solid black;
	background: #00FF00;
	color: black;
	font-family: monospace;
}

div.level_debug:hover{
	border-top: 1px solid black;
	border-left:1px solid black;
	border-right:2px solid black;
	border-bottom:2px solid black;
	background: #FFFF00;
	color: black;
	font-family: monospace;
}

div.level_warning:hover{
	border-top: 1px solid black;
	border-left:1px solid black;
	border-right:2px solid black;
	border-bottom:2px solid black;
	background: #FF8000;
	color: black;
	font-family: monospace;
}

div.level_error:hover{
	border-top: 1px solid black;
	border-left:1px solid black;
	border-right:2px solid black;
	border-bottom:2px solid black;
	background: #FF0000;
	color: black;
	font-family: monospace;
}

div.level_critical:hover{
	border-top: 1px solid white;
	border-left:1px solid white;
	border-right:2px solid white;
	border-bottom:2px solid white;
	background: #000000;
	color: white;
	font-family: monospace;
}

div.level_audit:hover{
	border-top: 1px solid black;
	border-left:1px solid black;
	border-right:2px solid black;
	border-bottom:2px solid black;
	background: #00FFFF;
	color: black;
	font-family: monospace;
}

div.level_boot:hover{
	border-top: 1px solid black;
	border-left:1px solid black;
	border-right:2px solid black;
	border-bottom:2px solid black;
	background: #00AAAA;
	color: black;
	font-family: monospace;
}

div.background_mask  {
	position:absolute; 
	top:0; 
	left:0; 
	min-height:100%; 
	width:100%; 
	background:#a2a2a2; 
	opacity:.75; 
	filter:alpha(opacity=75); 
	z-index:100;
}

div.button_enabled {
	border-bottom: solid 2px #888888;
	border-right: solid 2px #888888;
	border-top: solid 1px #686868;
	border-left: solid 1px #686868;
	padding : 2px 5px 2px 5px;
	margin: 2px 5px 2px 5px;
	background: #c2c2c2;
	text-align: center;
	cursor:pointer;
	width: 150px;
	float: left;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

div.button_enabled:hover{
	border-bottom: solid 2px #989898;
	border-right: solid 2px #989898;
	border-top: solid 1px #686868;
	border-left: solid 1px #686868;
	padding : 2px 5px 2px 5px;
	margin: 2px 5px 2px 5px;
	background: #c9c9c9;
	text-align: center;
	cursor:pointer;
	width: 150px;
	float: left;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

div.info_from_file{
	white-space: pre;
	text-align:center;
	font-family:"Courier New";
	color: black;
	width: auto;
}

div.queryerror{
	background: red;
	padding: 2px 0px;
}

div.querysuccess{
	background:green;
	padding: 2px 0px;
}

td.align_to_right{
	text-align:right;
}

td.align_to_left{
	text-align:left;
}

div.pc_receipt{
	background:white;
	white-space:pre;
	display: none;
	font-family: monospace;
}
div.pc_receipt_window{
	white-space:pre;
	display: inline;
	font-family: monospace;
}
div.record	
{
	margin: 0px 0px 0px 10px;
	padding:0px 0px 0px 0px;
	cursor:hand;cursor:pointer;
}

div.details	
{
	margin: 0px 0px 0px 60px;
}

div.row :after {
  display: table;
  clear: both;
}

div.cell{
	float: left;
}
div.w20{
	width:20%;
}
div.w30{
	width:30%;
}
div.w40{
	width:40%;
}
.weekdays input {
  display: none!important;
}

.weekdays input[type=checkbox] + label {
  display: inline-block;
  border-radius: 10px;
  background: #dddddd;
  height: 20px;
  width: 25px;
  margin-right: 1px;
  line-height: 20px;
  text-align: center;
  cursor: pointer;
  color: #000000;
}

.weekdays input[type=checkbox]:checked + label {
  background: #2AD705;
  color: #000000;
}