@media print {
#Info.ByOperation td[name='Product'] { width: 60px; }
#Info.ByOperation td[name='ProdName'] { width: 250px; }
#Info.ByOperation td[name='OperNo'] { width: 25px; }
#Info.ByOperation td[name='OperName'] { width: 180px; }
#Info.ByOperation td[name='Quan'] { width: 40px; }
#Info.ByOperation td[name='Price'] { width: 50px; }
#Info.ByOperation td[name='Sum'] { width: 60px; }

#Info.ByArticles td[name='No'] { width: 40px; }
#Info.ByArticles td[name='Date'] { width: 60px; }
#Info.ByArticles td[name='Empl'] { width: 25px; }
#Info.ByArticles td[name='EmplName'] { width: 200px; }
#Info.ByArticles td[name='OperNo'] { width: 25px; }
#Info.ByArticles td[name='OperName'] { width: 180px; }
#Info.ByArticles td[name='Quan'] { width: 40px; }
#Info.ByArticles td[name='Price'] { width: 50px; }
#Info.ByArticles td[name='Sum'] { width: 60px; }
}

@media screen {
#Info.ByOperation td[name='Product'] { width: 80px; }
#Info.ByOperation td[name='ProdName'] { width: 250px; }
#Info.ByOperation td[name='OperNo'] { width: 40px; }
#Info.ByOperation td[name='OperName'] { width: 250px; }
#Info.ByOperation td[name='Quan'] { width: 55px; }
#Info.ByOperation td[name='Price'] { width: 60px; }
#Info.ByOperation td[name='Sum'] { width: 80px; }

#Info.ByArticles td[name='No'] { width: 50px; }
#Info.ByArticles td[name='Date'] { width: 80px; }
#Info.ByArticles td[name='Empl'] { width: 30px; }
#Info.ByArticles td[name='EmplName'] { width: 225px; }
#Info.ByArticles td[name='OperNo'] { width: 25px; }
#Info.ByArticles td[name='OperName'] { width: 225px; }
#Info.ByArticles td[name='Quan'] { width: 60px; }
#Info.ByArticles td[name='Price'] { width: 50px; }
#Info.ByArticles td[name='Sum'] { width: 70px; }
}

#Info.ProducedItems td[name='Product'] { width: 80px; }
#Info.ProducedItems thead td[name='Product']::before { content: "Артикул"; }
#Info.ProducedItems tbody td[name='Product'] { text-align: Right; }

#Info.ProducedItems td[name='ProdName'] { width: 250px; }
#Info.ProducedItems thead td[name='ProdName']::before { content: "Наименование"; }
#Info.ProducedItems tbody td[name='ProdName'] { text-align: Left; }

#Info.ProducedItems td[name='Quan'] { width: 55px; }
#Info.ProducedItems thead td[name='Quan']::before { content: "Общо кол-во"; }
#Info.ProducedItems tbody td[name='Quan'] { text-align: Right; }

#Info.ProducedItems td[name^='Cnt'] { width: 60px; }
#Info.ProducedItems thead td[name^='Cnt']::before { content: ""; }
#Info.ProducedItems tbody td[name^='Cnt'] { text-align: Right; }

/********************************************************************/
/*#Info.ByOperation td[name='Product'] { width: 80px; }*/
#Info.ByOperation thead td[name='Product']::before { content: "Артикул"; }
#Info.ByOperation tbody td[name='Product'] { text-align: Right; }

/*#Info.ByOperation td[name='ProdName'] { width: 250px; }*/
#Info.ByOperation thead td[name='ProdName']::before { content: "Наименование"; }
#Info.ByOperation tbody td[name='ProdName'] { text-align: Left; }

/*#Info.ByOperation td[name='OperNo'] { width: 40px; }*/
#Info.ByOperation thead td[name='OperNo']::before { content: "Код"; }
#Info.ByOperation tbody td[name='OperNo'] { text-align: Right; }

/*#Info.ByOperation td[name='OperName'] { width: 250px; }*/
#Info.ByOperation thead td[name='OperName']::before { content: "Операция"; }
#Info.ByOperation tbody td[name='OperName'] { text-align: Left; }

/*#Info.ByOperation td[name='Quan'] { width: 55px; }*/
#Info.ByOperation thead td[name='Quan']::before { content: "Изр."; }
#Info.ByOperation tbody td[name='Quan'] { text-align: Right; }

/*#Info.ByOperation td[name='Price'] { width: 60px; }*/
#Info.ByOperation thead td[name='Price']::before { content: "Ст-ст"; }
#Info.ByOperation tbody td[name='Price'] { text-align: Right; }

/*#Info.ByOperation td[name='Sum'] { width: 80px; }*/
#Info.ByOperation thead td[name='Sum']::before { content: "Сума"; }
#Info.ByOperation tbody td[name='Sum'] { text-align: Right; }

/********************************************************************/
/*#Info.ByArticles td[name='No'] { width: 50px; }*/
#Info.ByArticles thead td[name='No']::before { content: "Номер"; }
#Info.ByArticles tbody td[name='No'] { text-align: Right; }

/*#Info.ByArticles td[name='Date'] { width: 80px; }*/
#Info.ByArticles thead td[name='Date']::before { content: "Дата"; }
#Info.ByArticles tbody td[name='Date'] { text-align: Right; }

/*#Info.ByArticles td[name='Empl'] { width: 30px; }*/
#Info.ByArticles thead td[name='Empl']::before { content: "Изп."; }
#Info.ByArticles tbody td[name='Empl'] { text-align: Right; }

/*#Info.ByArticles td[name='EmplName'] { width: 225px; }*/
#Info.ByArticles thead td[name='EmplName']::before { content: "Наименование"; }
#Info.ByArticles tbody td[name='EmplName'] { text-align: Left; }

/*#Info.ByArticles td[name='OperNo'] { width: 25px; }*/
#Info.ByArticles thead td[name='OperNo']::before { content: "Код"; }
#Info.ByArticles tbody td[name='OperNo'] { text-align: Right; }

/*#Info.ByArticles td[name='OperName'] { width: 225px; }*/
#Info.ByArticles thead td[name='OperName']::before { content: "Операция"; }
#Info.ByArticles tbody td[name='OperName'] { text-align: Left; }

/*#Info.ByArticles td[name='Quan'] { width: 60px; }*/
#Info.ByArticles thead td[name='Quan']::before { content: "Брой"; }
#Info.ByArticles tbody td[name='Quan'] { text-align: Right; }

/*#Info.ByArticles td[name='Price'] { width: 50px; }*/
#Info.ByArticles thead td[name='Price']::before { content: "Ст-ст"; }
#Info.ByArticles tbody td[name='Price'] { text-align: Right; }

/*#Info.ByArticles td[name='Sum'] { width: 70px; }*/
#Info.ByArticles thead td[name='Sum']::before { content: "Сума"; }
#Info.ByArticles tbody td[name='Sum'] { text-align: Right; }

/*.InfoCanvas
{ width: 100%;
  height: 100px;
  overflow-y: auto;
}*/
div[name="Fields"]
{ width:200px; 
  height:400px; 
  border:1px solid gray; 
  overflow-y:scroll; 
  display:none; 
  z-index:10; 
  position:relative; 
  background-color:#eee;
}

.InfoCanvas>table
{ border-collapse: collapse;
  background-color: PowderBlue;
  z-index:1;
  position: relative;
  float: left;
}

.InfoCanvas>table td
{ border: 1px solid grey; }

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

.InfoCanvas>table thead td
{ text-align: center; 
  font-weight: bold; }
  
.InfoCanvas>table tbody
{ display: block;
  overflow-y: scroll;
  overflow-x: hidden;
  border-right:1px solid grey;
  margin-right:-1px;
}

.InfoCanvas>table tbody tr
{ margin-top:-1px; 
  display: table; 
  width:100%;
  table-layout:fixed;
}

.InfoCanvas>table tbody tr:hover
{ background-color:lightcyan; 
  cursor: pointer; }
  
.InfoCanvas>table tfoot  
{ background-color: #8bd1da; 
  display: table; 
  width:100%;
}

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