@CHARSET "UTF-8";
 /* Copyright Droggitis IT Systems   */


:root {
  --main-floor-color: #D3D3D3;
  --AppContainerBG: #000000;
  --ToolsBG:#4169E1;
  --GridLineSelectedBG:#ffff00 ;

  --NavDotsLow:#DCDCDC;
  --NavDotsHigh:#4169E1;




  --GridListBG:#000000;
  --GridListFontColor:#FFFFFF;

  --GridListBGSelected:#000000;
  --GridListFontColorSelected:#FFFFFF;
  --GridListBottomBorderColorSelected:#FFD230;

  --GridListBGTitles:#D1D5DC;
  --GridListFontColorTiles:#193CB8;

  --GridListVertBorderVolor:#364153;
  --GridListBottomBorderColor:#3F3F46;






  --FormsTitleColor: #FDDA0D; 
  --FormsInputFontColor: #000000;
  --FormsInputBGColor: #FFFFFF;
  --FormsInputBorderColor: #FFFFFF;



  --ErrorFieldBGColor: #EFC050;

  --BtnSelectionGB: #D3D3D3 ;
  --BtnSelectionColor: #696969 ;
  --BtnSelectionActiveBG: #0000CD ;
  --BtnSelectionActiveColor: white ;


}



/*
  --FormsInputBGColor:  #E9E9E9;
  --BasketListBasicDivBG:  #F0FFFF;
  --BasketListBasicDivColor: #0000CD;
  --BasketListSecondaryDivColor: #0000AD;

*/

body{font-family:arial,helvetica,courier; background-color:  var(--main-floor-color);  z-index:1;     }

.BodyFullDiv{position:absolute; top:0px; left:0px; right:0px; bottom:0px;  
              display: flex;  flex-direction:row;  justify-content: center;  align-items:center; align-content: center;
              background-color:  var(--main-floor-color); 
             font-family:arial,helvetica,courier; text-transform:none; z-index:1; }

.AppContainer{position:absolute; width:100%; max-width:1200px; height:100%; min-height:300px; 
             background-color:  var(--AppContainerBG);  z-index:2;  }

.TopArea{position:absolute; top:0px; left:0px; height:80px; width:100%; background: var(--ToolsBG); color: #fff; 
        display:flex;  justify-content: space-between;    align-items: center;   z-index:3; }

.MainArea{position:absolute; top:80px; left:0px; bottom:40px; width:100%;  overflow:hidden; 
        display: flex;  flex-direction:column;  justify-content: center;  align-items:center; align-content: center;    z-index:3;}

.FooterArea{position:absolute; bottom:0px; left:0px; height:40px; width:100%; background:  var(--ToolsBG); color: #fff;  overflow:hidden; 
            display:flex;  justify-content: center;   align-items: center;    z-index:3;}



.FormTopArea{position:absolute; top:0px; left:0px; height:40px; width:100%; background:  var(--ToolsBG); color: #fff;  overflow:hidden; 
            display:flex;  justify-content: center;   align-items: center;    z-index:3;  font-size:1em;}

.FormTopArea a{font-size:1.6em; font-weight:bold;}

.FormBottomArea{position:absolute; bottom:0px; left:0px; right:0px; height:60px; background: var(--ToolsBG); color: #fff; 
        display:flex;  flex-direction:row; justify-content:space-between;  align-items: center;  padding:0px 20px 0px 20px;}




.MainMenuTop{display:flex;  flex-direction: row;  justify-content: flex-start  top:0;  overflow:hidden;  z-index:10;  }

.MainMenuTop a{font-size:1.5em; font-color:white;   font-weight:bold; padding:0px 10px 0px 0px; }

.MainMenuIcons{width:50px; height:50px; margin-left:10px; }
.HomeIcon{background:url(../img/home.png) no-repeat; background-size:50px 50px;}
.SrvIcon{background:url(../img/note.png) no-repeat; background-size:50px 50px;}
/*
.MoneyIcon{background:url(../img/payment.png) no-repeat; background-size:50px 50px;     display:flex;  justify-content:center;    align-items:flex-start;}
*/
.MoneyIcon{background:url(../img/payment.png) no-repeat; background-size:50px 50px;}
.CustomerIcon{background:url(../img/account.png) no-repeat; background-size:50px 50px;}
.CredencialsIcon{background:url(../img/config.png) no-repeat; background-size:50px 50px; align-self:flex-end;}


.AddIcon{background:url(../img/add.png) no-repeat; background-size:50px 50px;}
.EditIcon{background:url(../img/edit.png) no-repeat; background-size:50px 50px;}
.DeleteIcon{background:url(../img/delete.png) no-repeat; background-size:50px 50px;}

.RefreshIcon{background:url(../img/refresh.png) no-repeat; background-size:50px 50px;}




.OKIcon{background:url(../img/posok.png) no-repeat; background-size:50px 50px;}
.CancelIcon{background:url(../img/poscancel.png) no-repeat; background-size:50px 50px;}







.planBtn40{display:flex; width:40px;  height:40px; overflow:hidden;  border:none; background-size:   contain; background-color: var(--FormsInputBGColor); }
/*
.planBtn40:hover{border:0px #6666FF solid;   -webkit-border-radius: 10px;   -moz-border-radius: 10px;   border-radius: 10px; background-color:#4da6ff;}
*/
.BtnSearch40{background:url(../img/search.png); background-size:40px 40px;  background-color: var(--FormsInputBGColor);}



/* ========================================================================================= */



.appDialogContairer{position:absolute; top:80px; left:0px; bottom:80px; width:100%;  
                    display:flex;   flex-direction:row;  justify-content: center;  align-items: center; z-index:9000;}
.appDialog{width:90%; max-width:350px;  max-height:400px; margin:0px;  
                    display: flex;  flex-direction:column;  align-content:flex-start; align-items:flex-start justify-content: center;
                    background: var(--FormsInputBGColor); color: var(--FormsInputFontColor);   border: 8px #DDDDDD solid;  border-radius: 10px;}

.appDialogLine{width:98%;   min-height:40px;  max-height:180px; 
                    display:flex;  flex-direction:row;  justify-content:center;  align-items: center; align-content:center;
                     font-size: 2em;    margin-top: 2px; margin-bottom: 2px; padding-top:4px; padding-bottom: 4px; }
.appDialogLineText{ font-size: 1.2em; }                  
.appDialogLineImgBtn{max-height: 50px; margin-top: 5px; margin-bottom: 5px; }


.appDialogLineInput{width:98%;  display:flex;  flex-direction:row;  justify-content:center;  align-items: center; align-content:center;   
                    padding-left:5px ;  padding-right: 10px;}
.appDialogLine input{width:80%; height:90%; font-size: 2.2em;  font-weight: 500; text-align: center; 
                        color: var(--FormsInputFontColor); border: 1px var(--FormsInputBGColor) solid;  }





/* ========================================================================================= */
/*
.FlexFullWidthHeightCenter{position:absolute; top:0px; left:0px; right:0px; bottom:0px;  
                display: flex;  flex-direction:column;  justify-content: center;   align-items: center;   align-content: center;  
                z-index:5;}
.CustomerLogoImg{  width: 60%; max-width:600px;  }
*/


.FlexFullWidthHeightCenter{diaplay:flex; min-height:100px; width:100%;  
                display: flex;  flex-direction:column;  justify-content: center;   align-items: center;   align-content: center;  
                z-index:5;}
.CustomerLogoImg{  width: 60%; max-width:600px;  }




.FrontPageMessage{width:100%;   min-height:60px;  max-height:180px;   background-color:var(--GridListBG);  color: var(--GridListFontColor); 
                    margin-top: 12px; margin-bottom: 2px;    font-size: 2em; }
















/* ========================================================================================= */



.AccountPageContainer{position:absolute; top:0px; left:0px; right:0px; bottom:0px;  
                  display:flex;  flex-direction:row; justify-content:center;  align-items:center;  align-content: center;   z-index:5;}


.AccountListContainer{width:98%; height: 100%; max-width:450px;   margin:0px; 
                    display: flex;  flex-direction:column;  align-content:flex-start; align-items:flex-start justify-content: center;
                    background: var(--FormsInputBGColor);
                    overflow-x:hidden; overflow-y:auto;}

.AccountListLine{width:98%;   min-height:60px;  max-height:180px; 
                    display:flex;  flex-direction:column;  justify-content:flex-start;  align-items: flex-start; align-content:flex-start;
                    margin-top: 2px; margin-bottom: 2px;   
                    background: var(--FormsInputBGColor);  border-radius: 6px;}


.AccountListLineTitle{width:100%;  text-transform:none; font-size: 1em;      
                        padding-left:5px ; padding-right: 10px; text-align: left;  
                        color: var(--FormsTitleColor);}
.AccountListLineInput{width:98%;  display:flex;  flex-direction:row;  justify-content:flex-start;  align-items: flex-start; align-content:flex-start;   
                    padding-left:5px ;  padding-right: 10px;}
.AccountListLineInput input{width:100%; height:100%; font-size: 1.0em;  font-weight: 500; text-align: left; 
                        color: var(--FormsInputFontColor); border: 1px var(--FormsInputBGColor) solid;  }

.AccountListLineAlert{width:100%;  text-transform:none; font-size: 1.5em;      
                        padding-left:5px ; padding-right: 10px; text-align: center;  
                        color: red;}



.AccountListLineBig{width:98%;   min-height:90px;  max-height:250px; 
                    display:flex;  flex-direction:column;  justify-content:flex-start;  align-items: flex-start; align-content:flex-start;
                    margin-top: 2px; margin-bottom: 2px;   
                    background: var(--FormsInputBGColor);  border-radius: 6px;}
.AccountListLineInputBig{width:98%;  display:flex;  flex-direction:row;  justify-content:flex-start;  align-items: flex-start; align-content:flex-start;   
                    padding-left:5px ;  padding-right: 10px;}
.AccountListLineInputBig textarea{width:100%; height:100%; font-size: 1.0em;  font-weight: 500; text-align: left; 
                        color: var(--FormsInputFontColor); border: 1px var(--FormsInputBGColor) solid;  }


.AccountListLineFlexRow{width:98%;   min-height:60px;  max-height:180px; 
                    display:flex;  flex-direction:row;  justify-content:space-between;  align-items: center; align-content:center;
                    margin-top: 4px; margin-bottom: 4px;   
                    background: var(--FormsInputBGColor);  border-radius: 6px;}

.AccountListLineFlexRowTxt{width:80%;  text-transform:none; font-size: 0.9em;      
                        padding-left:2px ; padding-right: 4px; text-align: left;  
                        color: var(--FormsTitleColor);}

.AccountListLineFlexCheckBox{width:20%;  text-transform:none; font-size: 2em;      
                        padding-left:2px ; padding-right: 2px; text-align: left;  
                        color: var(--FormsTitleColor);}                    




.AccountListLineImgBtnDiv{width:98%;  height:70px;  
                    display: flex;   flex-direction:row;  justify-content: space-around ;  align-items:center; align-content: center;
                    object-fit: scale-down }   
.AccountListLineImgBtn{ max-height: 50px;}













.BtnSelection{width:100%; max-height:90px; min-height:60px;  margin:2px; font-size: 1.5em;  font-weight: 700;
                    display: flex;   flex-direction:row;  justify-content:  center;  align-items:center; align-content: center;
                     background: var(--BtnSelectionGB); color: var(--BtnSelectionColor); border-radius: 6px;}
.BtnSelection a{font-size: 1.5em;  margin-right:10px; }

.BtnSelectionActive{background: var(--BtnSelectionActiveBG); color: var(--BtnSelectionActiveColor); }













/*XXXXXXXXXXXXXXXXXX  GRID DIV   XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/



   
.GridDiv{position:absolute; top:1px; left:0px; bottom:0px; right:0px; background-color: var(--GridListBG);   color: var(--GridListFontColor);
            display:block;  overflow:auto; font-size: 1.0em;     box-shadow: 0px 0px 9px rgba(0,0,0,0.15);}    
     
    
.GridDivTable{display:table;  font-family: arial,helvetica,courier;  width:100%;  
            background-color:var(--GridListBG);  color: var(--GridListFontColor);  margin:0px; padding:0px; }


.GridDivTablethtr{display:table-row;  overflow:hidden; font-size: 1.0em;  
                background-color:var(--AppContainerBG); color: var(--GridListFontColor); padding:2px;  min-height:60px;}
.GridDivTablethtr:hover{background-color:var(--AppContainerBG); color: var(--GridListFontColor);  }





.GridDivTabletr{display:table-row;  overflow:hidden; font-size: 1.0em;   padding:2px;  min-height:60px; }
.GridDivTabletr:hover{   }








.GGridDivTableth{display:table-cell;  min-width:20px; max-width:250px; min-height:60px;  max-height:100px; overflow:hidden;text-align:center; 
                background-color:var(--GridListBGTitles); ; color:var(--GridListFontColorTiles);   padding:4px 4px 4px 4px; margin:10px 0px 10px 0px;
                font-size: 1.3em;    border:1px #E8E8E8  solid;   -webkit-border-radius: 2px;   -moz-border-radius: 2px;   border-radius: 2px;}





.GridDivTabletd{display:table-cell;  min-width:30px; max-width:250px; min-height:100px; max-height:200px;  overflow:hidden;text-align:right; 
                background-color:var(--AppContainerBG);   color: var(--GridListFontColor);
                padding:15px 4px 15px 4px;    margin:10px 0px 10px 0px; font-size: 1.3em;  
                border-bottom-width:1px; border-bottom-style: solid;   border-bottom-color: var(--GridListBottomBorderColor); 
                }

.GridDivTabletrSelected .GridDivTabletd{ background-color:var(--GridListBGSelected);  color: var(--GridListFontColorSelected); 
                        border-bottom-width:3px; border-bottom-color:var(--GridListBottomBorderColorSelected);  font-weight:bold;}


/*
.GridDivTabletrSelected{ background-color:var(--GridListBGSelected);  color: var(--GridListFontColorSelected); 
                        border-bottom-color:var(--GridListBottomBorderColorSelected);  font-weight:bold;}

                border-right-width:1px; border-right-style:solid; border-right-color: var(--GridListVertBorderVolor); 


.GGridDivTableth{display:table-cell;  min-width:20px; max-width:250px; min-height:60px;  max-height:100px; overflow:hidden;text-align:center; 
                background-color:var(--GridListBGTitles); ; color:var(--GridListFontColorTiles);   padding:4px 4px 4px 4px; margin:10px 0px 10px 0px;
                font-size: 1.3em;    border:1px #E8E8E8  solid;   -webkit-border-radius: 2px;   -moz-border-radius: 2px;   border-radius: 2px;}



.GridDivTabletd{display:table-cell;  min-width:30px; max-width:250px; min-height:100px; max-height:200px;  overflow:hidden;text-align:right; 
                background-color:var(--AppContainerBG);   color: var(--GridListFontColor);
                padding:15px 4px 15px 4px;    margin:10px 0px 10px 0px; font-size: 1.3em;  
                border-width:0px; border-color: var(--GridListVertBorderVolor); border-style:solid;
                border-bottom-width:1px; border-bottom-style: solid;   border-bottom-color: var(--GridListBottomBordeColor); 
                -webkit-border-radius: 2px;   -moz-border-radius: 2px;   border-radius: 2px;}
*/










.GridDivTableInput{ font-family: Arial;  font-size: 1.0em; text-align:center; width:100%;   background-color:#EBF5FF ; color:#404040; padding:2px 2px 2px 2px;}

.GridDivTableColorBox{ width:25px; height:15px;  background-color:#EBF5FF ; padding:5px 5px 5px 5px; border:1px black solid;  
             -webkit-border-radius: 2px;   -moz-border-radius: 2px;   border-radius: 2px;}

     
     
     
.CNFGENERAL_GridDivTableInput{ font-family: Arial;  font-size: 1.0em; text-align:center; width:550px;   background-color:#EBF5FF ; color:#404040; padding:4px 4px 4px 4px;  }
     
.GridDivTabletr SELECT{font-size: 1.0em; width:120px;  background-color: var(--GridListBG);   color: var(--GridListFontColor); }       
     
/*XXXXXXXXXXXXXXXXXX  GRID DIV  END  XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/












/*OOOOOOOOOOOOOO   POP UP OOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO*/


.FormDataContents{position:absolute; top:2px; bottom:2px;  width:100%;  font-family: Arial, verdana, helvetica, sans-serif;  
                        font-size: 1.3em;  background-color:  var(--AppContainerBG); 
                        display:flex;  flex-direction:column; align-content: flex-start; 
                        overflow-y: scroll }



.FormLine{display:flex; width:98%; min-height:70px; max-height:300px;  margin:0px;  padding:0px 5px 0px 5px;
                     display:flex;  flex-direction:row; justify-content:space-between;  
                 background-color:  var(--AppContainerBG); }


.FormDataBox{display:flex; width:100%; height:100%  margin:0px;  padding:2px 10px 2px 10px;
              display:flex;  flex-direction:column;   align-content: flex-start;   flex-grow: 1;   flex-shrink: 1;
             }




.FormFieldTitle{display:flex; width:100%; min-height:15px; max-height:25px;  font-size:1.0em; color: var(--FormsTitleColor); 
                 padding:2px 10px 2px 10px;}

/*
.FormInputContainer{display:flex; width:100%; min-height:40px; max-height:60px;  
                background-color:var(--FormsInputBGColor); border-width: 1px;    border-style: solid;    border-color: var(--FormsInputBorderColor);
                justify-content:center;   align-items: center;
                -webkit-border-radius: 3px;   -moz-border-radius: 3px;   border-radius: 3px;   }
*/


.FormInputContainer{display:flex; width:100%; min-height:40px; max-height:160px;  
                background-color:var(--FormsInputBGColor); border: none; 
                justify-content:center;   align-items: center; }


.FormInputContainer input{display:flex; width:100%; height:94%;  font-size:1.5em; text-align:center;
                background-color:var(--FormsInputBGColor);  color: var(--FormsInputFontColor); border:none;}



.FormSELECTcontainer{display:flex; width:100% !important; min-width:100px; ;min-height:40px; max-height:45px;   padding: 5px 4px 5px 4px; margin:0px;   }
.FormSELECTcontainer SELECT{width:100% !important; min-width:100px; font-size:1.3em; color: var(--FormsInputFontColor);   background-color:var(--FormsInputBGColor); }


.FormLineTextArea4{display:flex; width:100%;  height:150px; text-align:left;  font-size:1.5em; color: var(--FormsInputFontColor); 
                            padding: 2px; margin:0px; background-color:var(--FormsInputBGColor);     
                            border-width: 1px;    border-style: solid;    border-color: var(--FormsInputBorderColor);  
                            -webkit-border-radius: 3px;   -moz-border-radius: 3px;   border-radius: 3px; }


.FormLineSeperator{display:flex; width:100% height:4px; margin: 5px 0px 5px 0px; background-color:  var(--AppContainerBG);  }









/*--------------------------------------------------------*/

 .choices {
    width: 100% !important;
    display: block !important;
    box-sizing: border-box !important;
    min-width: 0; /* important for flex children */
  }

  /* Make the inner input/list take full width */
  .choices__inner {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* For multi chips, ensure the list expands correctly */
  .choices__list--multiple {
    width: 100% !important;
    min-width: 0;
  }

  /* If your select is inside a flex container, ensure flex children can shrink */
  .flex-parent {
    display: flex;
    gap: 12px;
  }
  .flex-child {
    flex: 1 1 auto; /* allow grow and shrink */
    min-width: 0;   /* critical so children can shrink properly */
  }