.bold   { font-weight: bold; }
.italic { font-style: italic; }
.center { text-align:center; }
.GreyLn { color: grey; }
.ThroughLn { text-decoration-line: line-through; }
.clear  { clear:both; height:0; width:0; margin:0; padding:0; }

.btn_img
{ min-height: 20px;  width: 20px;
  border: 0;
  background:none;
  background-position:center center;
  background-repeat: no-repeat;
}

.btn_img:hover:enabled { background-color:rgba(0,0,0,0.2);  cursor: pointer; }
.btn_img:disabled { filter: grayscale(100%); }
.btn_img.text:hover:enabled { color: darkred; }

.btn_img.text
{ width: auto;
  padding: 5px 8px 5px 28px;
  background-color:#ddd;
  background-position-x:4px;
  background-repeat: no-repeat;
  border:1px outset gray;
  border-radius:12px;
  line-height: 12px;
  margin-bottom:-1px;
}

.btn_ok     { background-image: url("Images/dlg-but-ok.png"); }
.btn_add    { background-image: url("Images/dlg-but-add.png"); }
.btn_edit   { background-image: url("Images/dlg-but-edit.png"); }
.btn_undo   { background-image: url("Images/dlg-but-undo.png"); }
.btn_del    { background-image: url("Images/dlg-but-drop.png"); }
.btn_list   { background-image: url("Images/dlg-but-browse.png"); }
.btn_search { background-image: url("Images/dlg-but-search.png"); }
.btn_pass   { background-image: url("Images/dlg-but-pass.png"); }
.btn_close  { background-image: url("Images/dlg-but-close.png"); }
.btn_update { background-image: url("Images/dlg-but-reload.png"); }
.btn_print  { background-image: url("Images/dlg-but-print.png"); }
.btn_up     { background-image: url("Images/dlg-but-sort_up.gif");   height:10px; margin:0; }
.btn_down   { background-image: url("Images/dlg-but-sort_down.gif"); height:10px; margin:0; }
.btn_up_fs   { background-image: url("Images/dlg-but-sort_up.gif"); }
.btn_down_fs { background-image: url("Images/dlg-but-sort_down.gif"); }
.btn_import { background-image: url("Images/dlg-but-import.png"); }
.btn_export { background-image: url("Images/dlg-but-export.png"); }

/**************************************************/
.ModalBox
{ display: none;
  z-index:100;
  background-color: rgba(0,0,0,0.15);
  Position:absolute;
  left:0px;  top:0px;
  right:0px; bottom:0px;
}

/**************************************************/
.BoxTitle
{ height:50px;
  background-color: whitesmoke;
  color: Black;
  border-bottom: 1px solid #ccc;
}

.DT_ListBox
{ flex-grow:1;
  display:flex;
  flex-direction: column;
  position:relative;
}

.DT_ListBox p.Title
{ padding: 4px 8px 0 8px;
  font-weight: bold;
  font-size: 16px;
  min-height:24px;
  background-color: whitesmoke;
  flex-basis: 100%;
}

div.Controls
{ padding: 0 8px;
  flex:0 0 49px;
  display:flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: flex-end;
  gap:0 10px;
  position:relative;
}

div.CtrlBtns
{ padding: 0 8px;
  /*flex:0 0 49px;*/
  display:flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: flex-end;
  gap:0 10px;
  position:relative;
}

div.CtrlBtns.Main.Hide { display: none; }
div.CtrlBtns.Line.Hide { display: none; }
div.CtrlBtns.Line { z-index: 150; }
div.CtrlBtns.Line button { box-shadow: 0 0 2px 4px white; }

.DT_ListBox div.Controls
{ background-color: whitesmoke; }

div.Controls button:not(.text)
{ border: 1px outset gray;
  border-radius: 12px;
  background-color:#ddd;
  width:24px;
  height:24px;
  margin-bottom:-1px;
}

/*
.Controls button.btn_img
{ border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
  margin-bottom:-1px;
}*/

.DT_List
{ flex-grow:1;
  overflow-y:auto;
  border: 2px solid black;
  min-height: 0;
}
/**************************************************/

.DataTable
{ width: 100%;
  border-collapse: separate;
  border-spacing:0;
  position: relative;
}

.DataTable thead, .DataTable tfoot { position: sticky;}
.DataTable thead { top:0px;    background-color: SkyBlue; }
.DataTable tfoot { bottom:0px; background-color: #8bd1da; }

.DataTable thead th,
.DataTable td
{ border-right: 1px solid Grey;
  border-bottom: 1px solid Grey;
  padding: 4px 1px;
}

.DataTable tr.Edit td { padding: 1px 0px; position: relative; z-index:150; }

.LineButtons
{ position: absolute;
  right:0px;
  border:none;
  justify-content: space-around;
  border-radius: 12px;
  border: 1px solid grey;
  background-color: rgba(0,0,0,0.1);
  display:none;
  width: 100px;
  z-index:150;
}

.LineButtons.Visible { display: flex; }

.DataTable tr.Edit td input { width:100%; }
/*.DataTable tr.Edit td.Controls input { width:auto; }*/

/*
@-moz-document url-prefix() 
{ .DataTable thead th span,
  .DataTable tfoot td span { margin-left:-1px; }
}*/

.DataTable thead tr:last-child th  { border-bottom: 2px solid black; }
/*.DataTable thead tr th:first-child span { border-left: none; margin-left:0; }*/

.DataTable tbody td.Controls { display: none;}

.DataTable tbody td:first-child { border-left: none; }
.DataTable tbody tr:first-child td { border-top: none; }
.DataTable tbody tr:last-child td { border-bottom: 1px solid black; }

.DataTable tbody tr:hover { cursor:pointer;}
.DataTable tbody tr:hover td { background-color: rgba(0,0,0,0.2) !important; }
.DataTable tbody tr.Selected { background-color: #bcf; }

.DataTable tfoot tr:first-child td { border-top: 1px solid black;}
.DataTable tfoot tr:last-child td { border-bottom: 2px solid black;}
/**************************************************/

.DT_Details
{ display: flex;
  flex-direction: column;
  background-color: AntiqueWhite;
  font: 14px/1.2 Verdana, Arial, Helvetica, sans-serif;
  color: #555;
  position: relative;
}

.DT_Details h1 { color: black; font-weight:bold; }

.DT_Details > .Title
{ background-color:BurlyWood;
  margin:0;
  padding: 4px 8px 0 8px;
  font-size: 1em;
  color: black;
  height:50px;
  position: relative;
  border-bottom: 1px solid brown;
  display: flex;
  flex-direction: column;
  flex:0 0 50px;
}

.DT_Details > .Title .Name
{ font-weight: bold;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.DT_Details > .Title .BtnSet
{ display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  height: 25px;
  gap:10px;
  flex:1;
}

/*.DT_Details > .Title .BtnSet button
{ border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
  margin-bottom:-1px;
}*/

.DT_Details > .Title.Changed { background:linear-gradient(to right, BurlyWood 80%, tomato); }
.DT_Details > .DataBox { overflow-y: scroll;  flex:1 1 auto; }
.DT_Details Fieldset legend { color:#555; padding: 0 3px; margin-left:5px; }
.DT_Details label { margin: 5px 0 0 3px;  display: block; }

/************************************************************/
.EditField { margin: 3px;  padding: 3px;  width:calc(100% - 6px); }
.EditField > label { margin:0 0 3px 0; }
.EditField > input { width:100%; }
.EditField > select { width:100%; }

span.Label
{ background: whitesmoke;
  height:20px;
  padding:2px 3px 1px;
  border: 1px solid grey;
  display: inline-block;
}

.EditField span.Label
{ vertical-align:middle;
  width: 100%;
}

.EditField span.LangLabel
{ color: #555;
  display: inline-block;
  width:25px; }

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

label.CheckBox input { margin-right:3px;  vertical-align:-1px;}
label.CheckBox:hover { /*background-color:#f7ddbb;*/ color:#e00; }
.DataBox label.CheckBox { padding:3px 1px; }
.DataBox label.CheckBox:hover { background-color:#f7ddbb; }
.DataBox h1
{ margin: 0px;
  width: 100%;
  box-sizing:border-box;
  background-color: #ccc;
  padding: 2px 5px;
  font-size:12px;
}

/************************************************************/
.Text2Upper { text-transform: uppercase; }

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

.FormTable { margin-top:5px; }

.Form td.NumField { border:1px solid grey;  background-color:whitesmoke;  text-align:right; color: black; padding:2px 3px; height: 21px; }

.Form input.NumField { text-align: right; }
/*********************************************************/
.LangData
{ border:1px solid grey;
  margin:-1px 0 0px 0px;
  padding-bottom:5px;
  clear:both;
}

.EditField.BG { background-color: Aquamarine; }
.EditField.EN { background-color: #ffc8b3; }

.LangSel
{ list-style:none;
  padding: 0;
  margin:-21px 0px 0px 5px;
}

.LangSel li
{ float:left;
  display: block;
  padding:2px;
  border: 1px solid grey;
  text-align:center;
  border-radius:0 0 8px 8px;
  margin:0px 8px 0px 8px;
  padding: 2px 10px;
  background-color: Aquamarine;
  cursor: pointer;
  position: relative;
}

.LangSel li:last-child
{ float:right;
  background-color: #ffc8b3;
}

/*.LangSel li.Select:first-child { border-bottom-color: Aquamarine; }
.LangSel li.Select:last-child  { border-bottom-color: #ffc8b3; }*/
.LangSel li:hover { color: #e00; }

/*form.BG .MultiLang { background-color: Aquamarine; }
form.EN .MultiLang { background-color: #ffc8b3; }*/
form.BG .ValEN { display:none !Important; }
form.EN .ValBG { display:none !Important; }

.ValBG { background-color: Aquamarine; }
.ValEN { background-color: #ffc8b3; }