.clear { clear:both; height:0; width:0; margin:0; padding:0; }

input[type='text'], input[type='password'] 
{ padding:1px;  margin:0px;   height:16px;
  font: 12px/1.2 Verdana, Arial, Helvetica, sans-serif; 
  border-width: 1px;}

select 
{ height: 20px; padding-left:0; 
  font: 12px/1.2 Verdana, Arial, Helvetica, sans-serif; }

p { line-height:18px; }

input[type='checkbox'], input[type='radio'] 
{ vertical-align:-2px; }

textarea,td 
{ font: 12px/1.2 Verdana, Arial, Helvetica, sans-serif; }

fieldset { margin:2px;  padding: 4px;  border: 1px gray solid; }

/*.clear {	clear:both; }*/

.bold { font-weight: bold; } 
.italic { font-style: italic; } 
.center { text-align:center; }

.but_img
{ height: 20px; 
  width: 20px;
  margin: 0px;
  padding: 0px;
  border: 0;
  background:none;
  background-position:center center;
  background-repeat: no-repeat;
  float:left;
}

.but_img:hover:enabled
{ background-color:rgba(0,0,0,0.2); 
  cursor: pointer;
}

.but_img_text
{ height: 22px; 
  margin: 2px 5px;
  padding: 3px 4px 3px 24px;
  border: 0;
  background-color:#ddd;
  background-position:2px center;
  background-repeat: no-repeat;
  text-align:right;
  border:1px outset gray; 
  border-radius:5px;
  line-height: 12px;
  text-decoration:none;
}

.but_img_text:disabled
{ filter: grayscale(100%); }

.but_img_text:hover:enabled
{ background-color:rgba(0,0,0,0.2); 
  color: darkred; 
  cursor: pointer;
}

.but_ok     { background-image: url("Images/dlg-but-ok.png"); }
.but_add    { background-image: url("Images/dlg-but-add.png"); }
.but_edit   { background-image: url("Images/dlg-but-edit.png"); }
.but_undo   { background-image: url("Images/dlg-but-undo.png"); }
.but_del    { background-image: url("Images/dlg-but-drop.png"); }
.but_list   { background-image: url("Images/dlg-but-browse.png"); }
.but_search { background-image: url("Images/dlg-but-search.png"); }
.but_pass   { background-image: url("Images/dlg-but-pass.png"); }
.but_close  { background-image: url("Images/dlg-but-close.png"); }
.but_update { background-image: url("Images/dlg-but-reload.png"); }
.but_print  { background-image: url("Images/dlg-but-print.png"); }
.but_up     { background-image: url("Images/dlg-but-sort_up.gif");   height:10px; margin:0; }
.but_down   { background-image: url("Images/dlg-but-sort_down.gif"); height:10px; margin:0; }
.but_up_fs   { background-image: url("Images/dlg-but-sort_up.gif"); }
.but_down_fs { background-image: url("Images/dlg-but-sort_down.gif"); }

/************************************************************************/

.Editable-Select
{ position:relative;
  background-color:white;
  height:20px;
}

.Editable-Select select
{ position:absolute;
  top:0px;
  left:0px;
  margin:0;
}

.Editable-Select input 
{ position:absolute;
  top:1px;
  left:1px;
  padding-left:3px;
  border:none;
}

.Editable-Select select:focus,
.Editable-Select input:focus
{ outline:none; }

.Dialog    { background-color: PowderBlue; }
.Dialog>h1 { background-color: darkcyan;  color: yellow; }

.Dialog
{ border: 3px solid darkblue;
  border-radius: 10px;
  overflow: hidden;
  position: absolute;
  box-shadow: 3px 3px 30px black;
  padding:0;
}

.Dialog>h1
{ width: 100%;
  height:21px;
  margin: 0px;
  padding: 3px 15px;
  font-size: 12px;
  font-weight: bold;
  box-sizing: border-box;
  border-radius: 8px 8px 0 0;
}

.Dialog .Navigation
{ position:relative;
  background-color:PowderBlue;
  border-right:1px solid grey;
  margin:0;
  z-index:1;
}
/************************************************************/

.EF_Style
{ font: 12px/1.2 Verdana, Arial, Helvetica, sans-serif;
  background-color: AntiqueWhite; 
  padding:0 0 5px 0;
  position: absolute;
  right: 0; 
  top:21px;
  border-left: 3px solid darkblue;
  height: calc(100% - 26px);
}

.EF_Style>h1
{ background-color:BurlyWood;
  margin:0;
  padding: 6px 10px;
  font-size: 1em;
  font-weight:bold;
  box-sizing: border-box;
  color: black;
}

.EF_Style Fieldset legend { color:#555; }

.EF_Style label
{ color: #555;
  margin: 5px 0 0 3px;
  font-size: 12px;
  display: block;
}
/***************************************************************/

.List
{ border-collapse: collapse;
  background-color: PowderBlue;
/*  z-index:1;*/
  position: relative;
  float: left;
}

.List td
{ border: 1px solid grey; }

.List>thead  
{ background-color: SkyBlue; 
  display: table; 
  width:100%;
}

.List>thead td 
{ text-align: center; 
  font-weight: bold; }

.List>tbody
{ display: block;
  overflow-y: scroll;
  overflow-x: hidden;
  border-right:1px solid grey;
  margin-right:-1px;
}

.List>tbody>tr
{ margin-top:-1px; 
  display: table; 
  width:100%;
  table-layout:fixed;
}
  
.List .RowSelect
{ background-color: Cyan; }

.List .ElemSel
{ background-color: #99b3ff; }
  
.List>tbody>tr button[name='Edit'],
.List>tbody>tr button[name='Print'],
.List>tbody>tr button[name='Undo'],
.List>tbody>tr button[name='Delete']
{ visibility: hidden; }

.List>tbody>tr:hover
{ background-color:lightcyan; 
  cursor: pointer; }

.List>tbody>tr.ElemSel:hover
{ background-color:#ccd9ff; }

.List>tbody>tr:hover button[name='Edit']:enabled,
.List>tbody>tr:hover button[name='Print']:enabled,
.List>tbody>tr:hover button[name='Undo']:enabled,
.List>tbody>tr:hover button[name='Delete']:enabled
{ visibility: visible; }

.List .RowSelect:hover button[name='Edit'],
.List .RowSelect:hover button[name='Print'],
.List .RowSelect:hover button[name='Undo'],
.List .RowSelect:hover button[name='Delete']
{ visibility: hidden; }

.List>tfoot  
{ background-color: #8bd1da; 
  display: table; 
  width:100%;
}

.List>tfoot td 
{ font-weight: bold;
  height: 18px;}

.List input, .List select
{ border:none;
  width:100%;
/*  box-sizing: border-box;*/
}

.List.Yellow { background-color: AntiqueWhite; }
.List.Yellow>tbody tr:hover { background-color:Bisque; }
.List.Yellow>thead { background-color:brown; color:#eee; }

.List.Light { background-color: white; }
.List.Light>tbody tr:hover { background-color: #ddd; }
.List.Light>thead { background-color:LightCyan; color:#black; }
.List.Light>thead td { font-weight: normal !Important; }
/************************************************************/

.EditField
{ float:left;
  margin: 0px; }

.EditField label
{ color: #555;
  margin: 5px 0 0 3px;
  font-size: 12px;
  display: block;
}

label.CheckBox
{ margin:0;
  padding:0;
  color: black;
  cursor: pointer;
}

label.CheckBox:hover
{ background-color:#f7ddbb; 
  color:#e00; }
/************************************************************/

.Text2Upper
{ text-transform: uppercase; }

.DateField
{ background-image: url("Images/iconCalendar.gif");
  background-repeat: no-repeat;
  background-position: 99% 50%;
  width: 90px; 
  cursor:pointer;
}

.FormTable
{ margin-top:5px;
  color:#555; 
  float:left;
}

.Framed
{ border-collapse: collapse; }

.Framed td
{ border: 1px solid grey;
  padding: 2px;
}

.Framed thead td
{ background-color:SkyBlue; /*brown;*/
  color:black; /*#eee;*/
  font-weight: bold;
  text-align:center;  
}

.FormList
{ border-collapse: collapse; }

.FormList td
{ border: 1px solid grey;
  padding: 2px; }

.FormList thead td
{ background-color:brown;
  color:#eee;
  font-weight: bold;
  text-align:center;
}

.FormList tbody tr
{ margin-top:-1px; }

.FormList tbody tr:hover
{ background-color:Bisque; }

.FormList thead, .FormList tbody tr
{ display: table; 
  width:100%;
  table-layout:fixed;
}
.FormList thead
{ width:calc(100% - 1.5em); }

.FormList tbody
{ display: block;
  overflow-y: scroll;
  overflow-x: hidden;
}

.FormList input, .FormList select
{ border:none;
  width:100%;
}

/*********************************************/
.SingleForm
{ background-color: PowderBlue;/*AntiqueWhite; */
  border: 2px solid darkblue;
  border-radius: 10px;
/*  overflow: hidden;*/
  position: relative;
 /* margin:5px auto;*/
  box-shadow: 3px 3px 30px white;
  padding:0;
}

div.Canvas
{ background-color:PowderBlue; 
  position:absolute; 
  border-radius:0 0 8px 8px; 
/*  min-height:calc(100% - 21px)*/
}

.SingleForm>.Canvas>h1
{ background-color:darkcyan;
  margin:0;
  padding: 6px 10px;
  font-size: 1em;
  font-weight:bold;
  box-sizing: border-box;
  color: black;
  border-radius: 8px 8px 0 0;
}

/*********************************************/

.EditFormBottom
{ background-color: AntiqueWhite; 
  width:100%;
  padding:0 0 5px 0;
  position: absolute;
  bottom: 0;
  border-top: 3px solid darkblue;
}

.EditFormBottom h1
{ background-color:BurlyWood;
  margin:0;
  padding: 2px 10px;
  font-weight:bold;
  font-size:1.2em;
  box-sizing: border-box;
  color: black;
}

.EditFormBottom Fieldset legend { color:#555; }