:root
{ --COLOR_F:#E8F4F0;
  --COLOR_E:#D0E8E0;
  --COLOR_D:#B8DCD0;
  --COLOR_C:#A0D0C0;
  --COLOR_B:#88C4B0;
  --COLOR_A:#70B8A0;
  --COLOR_9:#58AC90;
  --COLOR_8:#40A080;
  --COLOR_7:#388C70;
  --COLOR_6:#307860;
  --COLOR_5:#286450;
  --COLOR_4:#205040;
  --COLOR_3:#183C30;
  --COLOR_2:#102820;
  --COLOR_1:#081410;
  --COLOR_H:#FFFFFF;
}

@font-face
{ font-family:"Barcode";
  src:url("/Images/3 of 9 Barcode.ttf");
}

@font-face
{ font-family:"Metropolis";
  src:url("/Images/Metropolis-Bold.otf");
}

body
{ margin:0em;
  padding:0em;
  font-family:Verdana,Arial,Helvetica,Sans-Serif;
  font-size:unset;
  background-color:#FFFFFF;
  color:#002000;
  text-align:center;
  text-size-adjust:none;
}

a
{ color:var(--COLOR_5);
  text-decoration:none;
  font-weight:normal;
}
a:hover
{ color:#404040;
  text-decoration:underline;
}

td
{ font-family:Verdana,Arial,Helvetica,Sans-Serif;
  text-align:left;
}

form
{ margin:0em;
}

p
{ text-align:justify;
  margin:0.25em 0em 0.5em 0em;
}

img
{ border:0em;
}

hr
{ border-top:0.08em solid #808080;
  border-bottom:0.08em solid #D0D0D0;
}

/******************************************
 * Background lines
 ******************************************/
#backline_head
{ position:absolute;
  top:0em;
  width:calc(max(100%,1024px));
  background-color:var(--COLOR_6);
  box-shadow:0em 0.25em 0.5em #C0C0C0;
}
#backline_foot
{ clear:both;
  width:calc(max(100%,1024px));
  overflow:auto;
  background-color:#707070;
  box-shadow:0em 0em 0.5em #C0C0C0;
}

/******************************************
 * Wrapper box
 ******************************************/
#wrapper
{ position:relative;
  top:0em;
  margin:0.25em auto 0em auto;  
  text-align:left;
}

/******************************************
 * Header box
 ******************************************/
#header
{ position:relative;
  top:0em;
  margin:0em auto;
  color:#FFFFFF;
  text-align:right;
}
#header a
{ color:#FFFFFF;
  text-decoration:none;
  font-weight:normal;
}
#header_home
{ float:left;
  width:28em;
  text-align:left;
  font-weight:bold;
  font-family:Metropolis;
}
#header_name
{ width:32em;
  height:1.125em;
  font-size:0.75em;
}

/******************************************
 * Menu bar
 ******************************************/
#menu
{ width:24em;
  font-weight:bold;
  font-family:Metropolis;
}
#menu a
{ padding:0.625em 1em;
  font-size:1em;
  text-decoration:none;
  display:block;
  color:var(--COLOR_F);
  text-shadow:0.08em 0.08em var(--COLOR_5)
}
#menu a:hover
{ color:var(--COLOR_H);
}
.menu_item
{ background-color:var(--COLOR_8);
  border:0.05em solid var(--COLOR_5);
  border-radius:0.25em;
}
.menu_item:hover
{ background-color:var(--COLOR_7);
  border:0.05em solid var(--COLOR_9);
}

/******************************************
 * Footer box
 ******************************************/
#footer a
{ color:#FFFFFF;
  text-decoration:none;
}
#footer a:hover
{ color:#000000;
}
#copyright
{ color:#FFFFFF;
  font-size:0.7em;
}
#address
{ color:#FFFFFF;
  font-size:0.7em;
xbackground-color:#808080;
}
#display
{ clear:both;
  width:100%;
  margin:0em 0em;
  padding:0.25em 0em;
  font-size:0.75em;
  color:#FFFFFF;
  background-color:#505050;
  overflow:none;
}

/******************************************
 * List box
 ******************************************/
#list
{ width:20em;
  margin:0.25em 0em;
  font-weight:bold;
}
#list a
{ padding:0.5em 0.5em;
  text-decoration:none;
  display:block;
  color:var(--COLOR_F);
  text-shadow:0.05em 0.05em -var(--COLOR_5);
}
#list a:hover
{ color:var(--COLOR_H);
}
.list_item
{ margin:0.125em 0em;
  background-color:var(--COLOR_8);
  border:0.05em solid var(--COLOR_5);
  border-radius:0.25em;
}
.list_item:hover
{ background-color:var(--COLOR_6);
}

/******************************************
 * Params box
 ******************************************/
#param_button
{ position:absolute;
  left:0.5em;
  top:0.5em;
  width:1.5em;
  height:1.5em;
  font-size:0.75em;
  color:var(--COLOR_6);
  visibility:visible;
  display:inline;
xbackground-color:#808080;
  z-index:3;
}
#param_list
{ position:absolute;
  left:0.5em;
  top:0.5em;
  width:20em;
  padding:0.25em;
  font-size:0.75em;
  text-align:left;
  background-color:#FFFF80;
  visibility:hidden;
  display:none;
  z-index:3;
}
/******************************************
 * Links box
 ******************************************/
#links
{ float:left;
  width:9em;
  padding:0em 0.25em 0.25em 0.25em;
  color:var(--COLOR_7);
  z-index:1;
xbackground-color:#E0E0E0;
}
#links a
{ padding:0em 0em 0.05em 0.5em;
  font-size:0.875em;
  display:block;
}
#links a:hover, a:focus
{ color:var(--COLOR_H);
  text-decoration:none;
  background-color:var(--COLOR_7);
  border-radius:0.125em
}

/******************************************
 * Content box
 ******************************************/
#content
{ float:left;
  text-align:left;
  padding:0.5em;
  font-size:1em;
xbackground-color:var(--COLOR_F);
}

/******************************************
 * Breadcrumbs
 ******************************************/
#breadcrumbs
{ margin:0em 0em 0.5em 0em;
  font-size:0.875em;
  color:var(--COLOR_7);
}
#breadcrumbs a
{ color:var(--COLOR_6);
  text-decoration:none;
  font-weight:normal;
}
#breadcrumbs a:hover
{ color:#404040;
  text-decoration:underline;
}

/******************************************
 * Database box
 ******************************************/
#database
{ position:absolute;
  top:0em;
  right:0.5em;
  width:10em;
  font-size:0.625em;
  text-align:right;
  color:#A00000;
xbackground-color:#FFFFC0;
  z-order:1;
}

/******************************************
 * SQL box
 ******************************************/
#sql
{ position:absolute;
  top:0.75em;
  right:0.5em;
  z-order:1;
}

/****************************************************
 * Search Table
 ****************************************************/
.tablerow_head
{ padding:0.125em 0em;
  color:#FFFFFF;
  background-color:#808080;
  border-bottom:0.08em solid #303030;
}
.tablerow_0
{ background-color:#E0E0E0;
}
.tablerow_1
{ background-color:#F8F8F8;
}
.tablerow_0A
{ background-color:#E0E0E0;
}
.tablerow_1A
{ background-color:#F8F8F8;
}
.tablerow_0A:hover
{ background-color:var(--COLOR_6);
  color:#FFFFFF;
  cursor:pointer;
}
.tablerow_1A:hover
{ background-color:var(--COLOR_6);
  color:#FFFFFF;
  cursor:pointer;
}

/******************************************
 * 2D Button
 ******************************************/
.button_2D
{ padding:0em;
  font-size:0.875em;
  text-align:center;
  vertical-align:middle;
  background-color:#F0F0F0;
  border:0.08em solid #C0C0C0;
  border-radius:0.25em;
}
.button_2D:hover
{ color:#FFFFFF;
  background-color:var(--COLOR_7);
  border:0.08em solid var(--COLOR_4);
  cursor:pointer;
}
.button_2D a
{ padding:0.125em 0.25em;
  display:block;
  text-decoration:none;
}
.button_2D a:hover
{ color:var(--COLOR_H);
}

/******************************************
 * 3D Button
 ******************************************/
.button_3D
{ padding:0em;
  font-size:0.875em;
  text-align:center;
  vertical-align:middle;
  background-color:#FFFFFF;
  background-image:url("/Images/Button_3D_Normal.png");
  background-position:bottom;
  background-repeat:repeat-x;
  border:0.08em solid #C0C0C0;
}
.button_3D:hover
{ color:#000000;
  background-color:#C0E8D4;
  background-image:url("/Images/Button_3D_Hover.png");
  background-position:bottom;
  background-repeat:repeat-x;
  border:0.08em solid var(--COLOR_8);
  cursor:pointer;
}
.button_3D a
{ padding:0.125em 0.25em;
  display:block;
  text-decoration:none;
}
.button_3D a:hover
{ color:var(--COLOR_H);
}

/******************************************
 * Span types
 ******************************************/
.title
{ font-size:1.25em;
  color:var(--COLOR_5);
}
.title01
{ font-size:1.125em;
  color:var(--COLOR_5);
}
.title02
{ font-size:1em;
  color:var(--COLOR_5);
}
.title03
{ font-size:0.875em;
  color:var(--COLOR_5);
}
.title04
{ font-size:0.75em;
  color:var(--COLOR_5);
}

.error
{ margin:0.5em 0em;
  font-size:1em;
  color:#A00000
}

.version
{ font-size:0.5em;
  vertical-align:0.75em;
}

/******************************************
 * Data input
 ******************************************/
input    { padding:0.25em 0.25em;font-size:1.25em;border:0.08em solid #808080;border-radius:0.125em }
select   { padding:0.24em 0.125em;font-size:1.25em;border:0.08em solid #808080;border-radius:0.125em }
textarea { padding:0.25em;font-family:Arial;sans-serif;font-size:1.25em;border:0.08em solid #A0A0A0;border-radius:0.125em }
input[type=submit]   { padding:0.25em 0.5em;font-size:1.25em;background-color:#E0E0E0;border-radius:0.125em }
input[type=checkbox] { height:1.25em;width:1.25em;margin:0em 0.125em 0em 0em;vertical-align:middle }
.req     { background-color:#FFFFE0; }
.label   { padding:0em 0.25em;text-align:right;font-size:1em;color:#404040 }
.input   { }

/******************************************
 * Date picker
 ******************************************/
.date input[type="date"] { font-family:Arial,sans-serif;color:#000000 }
.date input[value=""]    { color:#808080 }
.time input[type="time"] { font-family:Arial,sans-serif;color:#000000 }
.time input[value=""]    { color:#808080 }