body
{
   overflow-y: false;
   	 
   font-family: consolas, monospace, arial;
   font-weight: normal;
   color: blue;
   font-size: 9pt;
   
   ###margin-left: 1pt;
   ###margin-right: 0pt;
   ###margin-top: 0pt;
   ###margin-bottom: 0pt;
   
   margin: auto;
}
td, div
{
   ##font-family: consolas, monospace, arial;
   font-size: 9pt;
   font-weight: normal;
   background-color: white;  
   padding: 3px 3px;
}
input, canvas, textarea
{
   -webkit-border-radius: 2px;
   -moz-border-radius: 2px;
    border-radius: 2px;
    border: 2px solid lightblue;     //#4B5763;
    outline: none;
    padding: 2px;
    margin: 1px;
    font-family: consolas, monospace, arial;
	font-size: 9pt;
	color: blue;
}
input:focus, canvas:focus, textarea:focus
{
    border: 2px solid #FFD700;
}
input[disabled]
{
	color: lightblue;
}
select
{
    font-family: consolas, monospace, arial;
	color: blue;
	-webkit-border-radius: 3px;
   -moz-border-radius: 3px;
    outline: lightblue solid 2px;
    outline-offset: 0px;
    padding: 2px;
    margin: 1px;
	font-size: 9pt;
	border:none;
	background-color: white;
}
select:focus
{
    outline: #FFD700 solid 2px;
}
input[type=checkbox]
{
  /* Double-sized Checkboxes */
  -ms-transform: scale(1); /* IE */
  -moz-transform: scale(1); /* FF */
  -webkit-transform: scale(1); /* Safari and Chrome */
  -o-transform: scale(1); /* Opera */
   margin: 0px;
}
input[type=radio]
{
  /* Double-sized Radio buttons */
  -ms-transform: scale(1); /* IE */
  -moz-transform: scale(1); /* FF */
  -webkit-transform: scale(1); /* Safari and Chrome */
  -o-transform: scale(1); /* Opera */
   margin: 0px;
}
input[type=radio]:focus
{
    outline: #FFD700 solid 2px;
}
input[type=button] /* all buttons */
{
	background-color: #CCCCEE;
	border:2px solid #CCCCEE; //#32383F;
	display: inline-block;
    color:blue;
	padding:2px 12px;
	margin:2px;
	font-weight:bold;
    xxwidth:8em;
    background-clip: padding-box;
    border-radius: 8px;
	font-size: 9pt;
}
input[type=button]:disabled
{
	color:#EEEEEE;
}
input[type=button]:focus
{
    border: 2px solid #CCCCCC;
    xxoutline: none;
}
input[type=button]:active
{
    border: 2px solid blue; //#FFD700;
    xxoutline: none;
}


xxxinput
{
   font-family: consolas, monospace, arial;
   font-size: 9pt;
   font-weight: normal;
}
xxxinput[type=button], input[type=file]
{
   font-weight: bold;
   font-family: consolas, monospace, arial;
   color: blue;
   background-color: #DDDDDD;
   cursor: pointer;
}
xxxinput:disabled
{
    color: #AAAAAA;
}
xxxselect
{
   border: 1px solid #9C9C9C;	
   font-family: consolas, monospace, arial;
   font-size: 9pt;
   color: blue;
}
xxxtextarea
{
   color: blue;	
   font-family: consolas, monospace, arial;
   font-size: 9pt;
   font-weight: normal;
}
.tableBorder
{
   border: 0px solid green;
   border-collapse: separate;
   border-spacing: 1px 1px;
   background-color: lightgreen;  
}
.tableBorder1
{
   border: 1px solid green;
   xxborder-collapse: separate;
   xxborder-spacing: 1px 1px;
   background-color: white;  
}
.tableLinkList
{
   border: 0px solid green;
   xxborder-collapse: separate;
   border-spacing: 5px 5px;
   background-color: white;  
}
.tableLinkListTd
{
   cursor:pointer;
   background-color: yellow;  
}
.leftBorder
{
   border-left-style: solid;	
   border-width: 2px;
   border-color: green;
}
.title1
{
   font-size: 15pt;
   font-weight: bold;
   padding: 5px 0px;   
}
.title2
{
   font-size: 11pt;
   font-weight: bold;
   background-color: white; //lightblue;
}
.title2l
{
   font-size: 11pt;
   font-weight: bold;
   cursor:pointer; 
   white-space: nowrap;
}
.title3
{
   font-size: 9pt;
   font-weight: bold;
}
.title4
{
   font-size: 1px;
}
.statusOk
{
   color: green;	
}
.statusError
{
   color: red;	
}
.inactive
{
   color: #aaaaaa;	
}
.inactiveDelete
{
   color: #aaaaaa;	
   text-decoration-line: line-through;
   text-decoration-color: #aaaaaa;
}
.activeDelete
{
   text-decoration-line: line-through;
   text-decoration-color: blue;
}
.cellLink1
{
   font-size: 9pt;
   font-weight: bold;
   cursor:pointer; 
   white-space: nowrap;
}
.cellLink2
{
   font-size: 9pt;
   font-weight: normal;
   cursor:pointer; 
}
.cellLink3
{
   font-size: 9pt;
   font-weight: normal;
   cursor:pointer; 
}
.error
{
   font-size: 9pt;
   font-weight: bold;
   color: red;
}
.highlight
{
   background-color: yellow; //#DDDDDD;
}
.head
{
   font-size: 9pt;
   font-weight: bold;
   color: blue;
   background-color: white; //lightblue;
}
.headTitle
{
   font-size: 10pt;
   font-weight: bold;
   color: blue;
   xxbackground-color: lightblue;
   
   xxborder: 1px solid white;
   xxborder-spacing: 1px 1px;
   
   border-top-style: solid;
   border-right-style: none;
   border-bottom-style: none;
   border-left-style: none;
   border-width: 2px;   
}
.input00
{
   font-size: 9pt;
   width:30pt;
}
.input0
{
   font-size: 9pt;
   width:56pt;
}
.input1
{
   font-size: 9pt;
   width:130pt;
}
.input2
{
   font-size: 9pt;
   width:300pt;
}
.input3
{
   width:450pt;
   font-size: 9pt;
   font-weight: normal;
}
.btn3
{
   width:160pt;
}
.popupMenuWindow /* popup window for menu */
{
  position: absolute; /* fixed; */
  visibility:hidden;
  background-color: white;  
  z-index:100;
  border: 3px solid green;
  border-spacing: 0px 0px;
}
.popupMenuTd /* popup menu items */
{
  font-size: 12pt;
  font-weight: bold;
  padding: 2px;
}
.popupMenuIdLinkInactive
{
   pointer-events: none;
}
.popupMenuIdLinkInactive:link,visited,hover,active
{
   text-decoration: none;
   color: #666666;	
}
.popupInputWindow /* popup window for simple text input on level 1*/
{
  position: absolute; /* fixed; */
  visibility:hidden;
  background-color: white;
  z-index:100;
  border: 5px solid green;
  border-spacing: 3px 3px;
}
.popupInputWindowWide /* popup window for simple text input on level 1*/
{
  position: absolute; /* fixed */
  visibility:hidden;
  background-color: white;
  z-index:100;
  border: 5px solid green;
  border-spacing: 3px 3px;
  width:80%;
}
.popupUpperInputWindow /* popup window for simple text input on level 2*/
{
  position: absolute; /* fixed; */
  visibility:hidden;
  background-color: white;
  z-index:200;
  border: 5px solid green;
  border-spacing: 3px 3px;
}
.popupPageCover
{
   XXXopacity:0.5;
   background-color:rgba(200,200,200,0.5);
   position:fixed;
   visibility:hidden;
   width:100%;
   height:100%;
   top:0px;
   left:0px;
   z-index:10;	
}

.tabPage
{
   width: 99%;
   xxxheight: 100%;
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: flex-start; 
   align: top;
   
   -ms-user-select:none;
   -moz-user-select:none;
   -webkit-user-select:none;
   -webkit-touch-callout: none;
   -khtml-user-select: none;
    user-select:none;   
}
.productBox
{
   position:relative; /*static, relative  relative works*/
	
   width: 150px;
   height: 150px;
   background-color:#DDDDDD; /* #11ccff; */
   
   margin: 1px;
   padding: 10px 10px;
   border: 1px solid white;
   
   font-size: 9pt;
   font-weight: bold;
   
   xxxtext-align: center;
   
   display: flex;
   justify-content: center;
   align-items: center;
   
   cursor:pointer; 
}
.productBoxUnavaiable
{
   color: #888888;
   position:relative; /*static, relative  relative works*/
	
   width: 150px;
   height: 150px;
   background-color:#DDDDDD; /* #11ccff; */
   
   margin: 1px;
   padding: 10px 10px;
   border: 1px solid white;
   
   font-size: 9pt;
   font-weight: bold;
   
   xxxtext-align: center;
   
   display: flex;
   justify-content: center;
   align-items: center;
   
   cursor:pointer; 
}
.productBoxSelected
{
   position:relative; /*static, relative  relative works*/
	
   width: 150px;
   height: 150px;
   background-color:#DDDDDD;
   
   margin: 1px;
   padding: 10px 10px;
   border: 1px solid blue;
   
   font-size: 9pt;
   font-weight: bold;
   
   xxxtext-align: center;
   
   display: flex;
   justify-content: center;
   align-items: center;
   
   cursor:pointer; 
}
.productBoxSelectedUnavaiable
{
   color: #888888;
   position:relative; /*static, relative  relative works*/
	
   width: 150px;
   height: 150px;
   background-color:#DDDDDD;
   
   margin: 1px;
   padding: 10px 10px;
   border: 1px solid blue;
   
   font-size: 9pt;
   font-weight: bold;
   
   xxxtext-align: center;
   
   display: flex;
   justify-content: center;
   align-items: center;
   
   cursor:pointer; 
}
.flexBox 
{ 
   display:flex;
   justify-content:space-around; 
}

.xml_kw
{
   color: red;
}
.xml_name
{
   color: green;
}
.xml_txt
{
   color: blue;
}

.autocomplete_popupWindow 
{
  position:absolute;
  visibility:hidden;
  xxleft:0px;
  xxtop:21px;
  border:solid green 2px;
  background-color:white;
  z-index:1000;  
}
.autocomplete_box 
{
  position:relative;
  overflow:visible;	
}

.textHighlight
{
   background-color: lightgreen;
}
.textDimmed
{
   background-color: #DDDDDD;
}
.amountBalance
{
   font-weight: bold;
   color: blue;
}
.amountCredit
{
   font-weight: bold;
   color: red;
}
.amountDebit
{
   font-weight: bold;
   color: green;
}
.amountCreditDimmed
{
   font-weight: bold;
   color: red;
   background-color: #DDDDDD;
}
.amountDebitDimmed
{
   font-weight: bold;
   color: green;
   background-color: #DDDDDD;
}
.amountCreditHighlight
{
   font-weight: bold;
   color: red;
   background-color: lightgreen;
}
.amountDebitHighlight
{
   font-weight: bold;
   color: green;
   background-color: lightgreen;
}
.totalAmountNormal
{
   font-size: 10pt;
   font-weight: bold;
   color: black;
   background-color: #33FFCC;
}
.totalAmountCredit
{
   font-size: 10pt;
   font-weight: bold;
   color: red;
   background-color: #33FFCC;
}
.totalAmountDebit
{
   font-size: 10pt;
   font-weight: bold;
   color: green;
   background-color: #33FFCC;
}

.tableFixHead
{
   overflow-y: auto; /* make the table scrollable if height is more than 200 px  */
   xxxheight: calc(100vh - 200px); /* calc(100vh - 420px);  gives an initial height of 200px to the table */
   padding: 0px 0px;
}
.tableFixHead thead th
{
   position: sticky; /* make the table heads sticky */
   top: 0px; /* table head will be placed from the top of the table and sticks to it */
}

.linkClean
{
   text-decoration: none;
}

.image-menu   {width:30px; height:30px; background-size:cover; background-repeat:no-repeat; background-image:url(../images/menu.png); cursor:pointer; background-position: center; }
.image-edit   {width:1em; height:1em; background-size:contain; background-repeat:no-repeat; background-image:url(../images/edit.gif); cursor:pointer; background-position: center; }
.image-cancel {width:1em; height:1em; background-size:contain; background-repeat:no-repeat; background-image:url(../images/cancel.gif); cursor:pointer; background-position: center; }
.image-arrow-left {width:30px; height:30px; background-size:cover; background-repeat:no-repeat; background-image:url(../images/arrow-left.png); cursor:pointer; background-position: center; }

.dccList
{
   display: grid;
   grid-template-columns: minmax(0px, 1fr);
   gap: 12px;
   width: 100%;
   padding: 8px 3px;
}
.dccColumn
{
   min-width: 0px;
   border: 1px solid lightblue;
   background-color: white;
}
.dccColumnHeading
{
   font-size: 11pt;
   font-weight: bold;
   padding: 8px;
   border-bottom: 1px solid lightblue;
   background-color: #CCCCEE;
}
.dccItemList
{
   min-height: 240px;
   max-height: calc(100vh - 190px);
   overflow-y: auto;
   padding: 4px;
}
.dccItem
{
   box-sizing: border-box;
   width: 100%;
   margin: 2px 0px;
   padding: 6px 8px;
   border: 1px solid transparent;
   border-radius: 3px;
   color: blue;
   background-color: white;
}
.dccItemName
{
   font-weight: bold;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}
.dccItemCount
{
   margin-top: 2px;
   color: green;
   font-size: 8pt;
}
.dccColumnMessage
{
   padding: 10px 6px;
   color: #666666;
}
@media (min-width: 760px)
{
   .dccList
   {
      grid-template-columns: repeat(3, minmax(0px, 1fr));
   }
}

/* Responsive application shell. */
.appPage
{
   box-sizing: border-box;
   width: 100%;
   max-width: 100vw;
   padding: 0px 8px 8px 8px;
}
.appPage > .title1
{
   box-sizing: border-box;
   width: 100%;
   margin: 8px 0px;
   padding: 10px;
   background-color: yellow;
   color: blue;
}
.pageToolbar
{
   box-sizing: border-box;
   display: flex;
   align-items: flex-end;
   flex-wrap: wrap;
   gap: 8px;
   width: 100%;
   padding: 4px 0px 10px 0px;
}
.toolbarField
{
   display: flex;
   flex: 1 1 220px;
   flex-direction: column;
   min-width: 0px;
   padding: 0px;
}
.toolbarSearchField
{
   max-width: 520px;
}
.toolbarField label
{
   margin-bottom: 4px;
   font-weight: bold;
}
.toolbarField input, .toolbarField select
{
   box-sizing: border-box;
   width: 100%;
   min-width: 0px;
}
.responsiveTable
{
   box-sizing: border-box;
   width: 100%;
   max-width: 100%;
   max-height: calc(100vh - 190px);
   overflow: auto;
   padding: 0px;
}
.responsiveTable > table
{
   width: 100%;
}
.responsiveTable th, .responsiveTable td
{
   overflow-wrap: anywhere;
}
.pageNavigation
{
   margin: 8px 0px;
}
.homePanel
{
   box-sizing: border-box;
   width: 100%;
   min-height: calc(100vh - 100px);
   padding: 18px 10px;
   border-top: 1px solid #CCCCEE;
   background-color: white;
   color: blue;
}
.homeIntroduction
{
   margin-bottom: 16px;
   font-size: 11pt;
}
.homeFeatureGrid
{
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
   gap: 12px;
}
.homeFeature
{
   box-sizing: border-box;
   min-width: 0px;
   padding: 14px;
   border: 1px solid lightblue;
   background-color: white;
}
.homeFeature h2
{
   margin: 0px 0px 8px 0px;
   font-size: 12pt;
}
.homeFeature a
{
   color: blue;
}
.homeFeature p
{
   margin: 0px;
   line-height: 1.45;
}

/* Fluid navigation menu; independent of the legacy popup menu style. */
.appMenu
{
   display: table;
   position: fixed;
   visibility: hidden;
   z-index: 1001;
   top: 48px;
   left: 8px;
   width: min(300px, calc(100vw - 16px));
   padding: 0px;
   border: 2px solid blue;
   border-collapse: collapse;
   background-color: white;
   color: blue;
   box-shadow: 0px 8px 28px rgba(0, 0, 120, 0.25);
}
.appMenu .title2
{
   padding: 9px;
   background-color: yellow;
   color: blue;
}
.appMenu .popupMenuTd
{
   padding: 0px;
}
.appMenu a
{
   display: block;
   padding: 10px;
   background-color: white;
   color: blue;
   text-decoration: none;
}
.appMenu a:hover, .appMenu a:focus
{
   background-color: yellow;
}

/* Fluid editors; independent of the legacy popup input window styles. */
.responsiveEditorDialog
{
   box-sizing: border-box;
   position: fixed;
   visibility: hidden;
   z-index: 1001;
   top: 50%;
   left: 50%;
   width: min(820px, calc(100vw - 24px));
   max-height: calc(100vh - 24px);
   padding: 0px;
   overflow: auto;
   border: 2px solid blue;
   background-color: white;
   color: blue;
   transform: translate(-50%, -50%);
   box-shadow: 0px 8px 28px rgba(0, 0, 120, 0.25);
}
.responsiveEditorTable
{
   box-sizing: border-box;
   width: 100%;
   table-layout: fixed;
   border-collapse: collapse;
   background-color: white;
}
.responsiveEditorTable td
{
   padding: 7px;
   overflow-wrap: anywhere;
}
.responsiveEditorTable .title2
{
   padding: 10px;
   background-color: yellow;
   color: blue;
   font-size: 11pt;
   font-weight: bold;
}
.responsiveEditorTable input[type="text"],
.responsiveEditorTable input[type="password"],
.responsiveEditorTable input[type="email"],
.responsiveEditorTable select
{
   box-sizing: border-box;
   width: 100%;
   min-width: 0px;
}

/* Responsive login surface. */
.loginPage
{
   box-sizing: border-box;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 100%;
   min-height: 100vh;
   padding: 16px;
   background-color: white;
}
.loginPanel
{
   box-sizing: border-box;
   width: min(440px, 100%);
   padding: 12px;
   border: 2px solid blue;
   border-collapse: separate;
   background-color: white;
   color: blue;
   box-shadow: 0px 8px 28px rgba(0, 0, 120, 0.18);
}
.loginPanel .title1
{
   padding: 10px;
   background-color: yellow;
   color: blue;
}
.loginPanel input[type="text"], .loginPanel input[type="password"]
{
   box-sizing: border-box;
   width: 100%;
   min-width: 0px;
}

@media (max-width: 600px)
{
   .appPage
   {
      padding: 0px 4px 4px 4px;
   }
   .pageToolbar > input
   {
      flex: 1 1 auto;
   }
   .responsiveEditorTable
   {
      font-size: 8pt;
   }
   .responsiveEditorTable td
   {
      padding: 5px 3px;
   }
   .responsiveTable
   {
      max-height: calc(100vh - 220px);
   }
}
.popupPageCover
{
   position: fixed;
   inset: 0px;
   width: 100vw;
   height: 100vh;
   background-color: rgba(0, 0, 80, 0.18);
}
@media (max-width: 600px)
{
   .dccColumnHeading
   {
      padding: 6px 3px;
      font-size: 9pt;
   }
   .dccItem
   {
      padding: 5px 3px;
   }
}
.productSearchFilters
{
   box-sizing: border-box;
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
   gap: 10px;
   width: 100%;
   padding: 10px 3px;
}
.listDataPage
{
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
   height: 100vh;
   width: 100%;
   max-width: 100vw;
   padding: 0px 6px;
   overflow: hidden;
}
.listDataPage #btnMenu
{
   align-self: flex-start;
   flex: 0 0 auto;
}
.listDataPage > .title1, .listDataPage > .productSearchFilters,
.listDataPage > .pageToolbar
{
   flex: 0 0 auto;
}
.listDataPage .pageToolbar > [role="status"],
.listDataPage .productFilterAction > [role="status"]
{
   box-sizing: border-box;
   flex: 1 1 auto;
   height: 24px;
   min-width: 0px;
   overflow: hidden;
}
.productFilterField
{
   display: flex;
   flex-direction: column;
   min-width: 0px;
   padding: 0px;
}
.productFilterField label
{
   margin-bottom: 4px;
   font-weight: bold;
}
.productFilterField select, .productFilterField input
{
   box-sizing: border-box;
   width: 100%;
   min-width: 0px;
}
.productFilterAction
{
   display: flex;
   align-items: flex-end;
   gap: 8px;
   padding: 0px;
}
.productFilterAction input
{
   flex: 0 0 auto;
}
.productFilterAction #listMessage
{
   box-sizing: border-box;
   flex: 1 1 auto;
   height: 24px;
   min-width: 0px;
   overflow: hidden;
}
.productTableContainer
{
   box-sizing: border-box;
   flex: 1 1 auto;
   min-height: 0px;
   width: 100%;
   max-height: none;
   overflow: auto;
}
.listDataPage > .pageNavigation
{
   flex: 0 0 auto;
   margin: 4px 0px;
}
.listDataTableContainer, .listDataContent
{
   flex: 1 1 auto;
   min-height: 0px;
   max-height: none;
   overflow: auto;
}
.listDataTableContainer tbody tr + tr td
{
   border-top: 1px solid #DDEEFF;
}
.listDataPage > .dccList
{
   box-sizing: border-box;
}
@media (min-width: 760px)
{
   .listDataPage > .dccList .dccColumn
   {
      display: flex;
      flex-direction: column;
      min-height: 0px;
   }
   .listDataPage > .dccList .dccItemList
   {
      flex: 1 1 auto;
      min-height: 0px;
      max-height: none;
   }
}
.productTableContainer .tableBorder1
{
   width: 100%;
   table-layout: auto;
}
.productTableContainer th, .productTableContainer td
{
   overflow-wrap: anywhere;
}
.productTableContainer th
{
   text-align: left;
}
.productTableContainer .productAmount
{
   text-align: right;
   white-space: nowrap;
}
.productTableContainer .productDetailsColumn
{
   text-align: center;
}
.productThumbnail
{
   display: block;
   width: 40px;
   height: 40px;
   margin-bottom: 3px;
   object-fit: contain;
}
.productInactive td
{
   color: #aaaaaa;
}
.productDetailsDialog
{
   box-sizing: border-box;
   position: fixed;
   visibility: hidden;
   z-index: 1001;
   top: 50%;
   left: 50%;
   width: min(760px, calc(100vw - 24px));
   max-height: calc(100vh - 24px);
   padding: 0px;
   overflow: hidden;
   border: 2px solid blue;
   background-color: white;
   color: blue;
   transform: translate(-50%, -50%);
   box-shadow: 0px 8px 28px rgba(0, 0, 120, 0.25);
}
.productDetailsHeader
{
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 8px 10px;
   background-color: yellow;
   color: blue;
   font-size: 11pt;
   font-weight: bold;
}
.productDetailsBody
{
   box-sizing: border-box;
   display: grid;
   grid-template-columns: minmax(180px, 240px) minmax(0px, 1fr);
   align-items: start;
   gap: 1px;
   max-height: calc(100vh - 78px);
   overflow-y: auto;
   background-color: #CCCCEE;
}
.productDetailsGrid
{
   box-sizing: border-box;
   display: grid;
   grid-template-columns: repeat(2, minmax(0px, 1fr));
   gap: 1px;
   padding: 1px;
   background-color: #CCCCEE;
}
.productDetailsSummary
{
   display: grid;
   gap: 1px;
   min-width: 0px;
   background-color: #CCCCEE;
}
.productDetailsSummary .productDetail
{
   grid-template-columns: 75px minmax(0px, 1fr);
   padding: 6px;
}
.productDetailsImagePanel
{
   box-sizing: border-box;
   display: none;
   padding: 6px;
   text-align: left;
   background-color: white;
}
.productDetailsImage
{
   display: block;
   max-width: 100%;
   max-height: min(300px, 40vh);
   margin: 0px;
   object-fit: contain;
}
.productDetail
{
   display: grid;
   grid-template-columns: minmax(105px, 35%) minmax(0px, 1fr);
   gap: 8px;
   min-width: 0px;
   padding: 8px;
   background-color: white;
}
.productDetail span
{
   font-weight: bold;
}
.productDetail strong
{
   min-width: 0px;
   overflow-wrap: anywhere;
   color: blue;
   font-weight: normal;
}
.familyProductsDialogBody
{
   box-sizing: border-box;
   padding: 8px;
   background-color: white;
}
.familyProductsTableContainer
{
   max-height: calc(100vh - 110px);
}
.familyProductsTableContainer table
{
   width: 100%;
}
@media (max-width: 760px)
{
   .productDetailsBody
   {
      grid-template-columns: 1fr;
   }
   .productDetailsGrid
   {
      grid-template-columns: 1fr;
   }
   .productTableContainer
   {
      max-height: none;
   }
}