.counterForm .dialog {
    position:absolute;
    left:0px;
    right:0px;    
    top:0px;
    bottom:0px;
    background: rgba(0,0,0,0.5);
    z-index: 999;
    display:none;    
}
.counterForm .dialog_box{
    position:absolute;
    top:calc(50% - 70px);
    height:120px;
    left:50px;
    right:50px;
    text-align: center;
    border: 1px solid var(--color-List2-RowBorder);
    background: var(--background-List2-Row);
}
.counterForm .dialog_title{
    margin:20px;
}

.counterForm        {
                    max-width:100%;
                    }
                    
.counterForm .dataFrame .itemBlock
                    {
                    position:relative;
                    left:0px;
                    top:0px;
                    width:100%;             
                    margin-bottom:15px;
                    border: 1px solid var(--color-List2-RowBorder);
                    background: var(--background-List2-Row);
                    box-shadow: 0px 0px 10px var(--color-List2-RowShadow);
                    border-radius:10px;
                    padding:10px;
                    vertical-align: top;                    
                    }
                    
.counterForm .dataFrame .msgTitle 
                    {
                    font-size:12px;    
                    visibility:hidden;                    
                    }
.counterForm .red   {color: var(--red);}
.counterForm .green {color: var(--green);}
                    
.counterForm .dataFrame .itemLeft
                    {
                    display:inline-block;
                    margin-left:60px;
                    width:40%;
                    vertical-align: top;
                    cursor:pointer;
                    overflow:hidden;
                    }
                    
.counterForm .dataFrame .itemRight
                    {
                    display:inline-block;
                    top:0px;
                    right:0px;
                    width: calc(60% - 65px); 
                    text-align: right;
                    vertical-align: top;
                    margin-right:0px;        
                    overflow:hidden;
                    }
.mobil .counterForm .dataFrame .itemLeft  {width:100%;display:block;}             
.mobil .counterForm .dataFrame .itemRight {width:100%;display:block;}             
.counterForm .dataFrame .itemBlock .icon
                    {
                    position:absolute;
                    left:15px;
                    top:10px;
                    width:40px;
                    height:40px;
                    filter:var(--icon-Invert);
                    cursor:pointer;    
                    }
                    
.counterForm .dataFrame .itemBlock .bernev {font-size:14px;width:calc(100% - 55px);}
.counterForm .dataFrame .itemBlock .cim    {font-size:14px;width:calc(100% - 55px);}
.counterForm .dataFrame .itemBlock .berazon{font-size:18px;}
.counterForm .dataFrame .itemBlock .dijnev {display:inline-block;vertical-align:middle;color:var(--color-List2-RowTitle1);overflow: visible}
.counterForm .dataFrame .itemBlock span    {font-size:12px;margin-top:-5px;color:var(--color-List1-RowTitle2);overflow: visible;}
.counterForm .dataFrame .itemBlock .input  {display:inline-block;margin-bottom:3px;margin-top:10px;vertical-align:middle;}
.counterForm .dataFrame .itemBlock .input  input {width:120px;margin-left:5px;}

/********/
/* FORM */
/********/

.mfpForm .dataFrame   {top:210px;font-size:15px;}
.mfpForm .headerFrame {height:145px;}
.mfpForm .headerFrame .dataBERAZON 
                    {
                    font-size:18px;
                    color: var(--color-List1-RowTitle1);    
                    }
.mfpForm .headerFrame .dataGEPNEV 
                    { 
                    overflow:hidden;
                    max-height: 20px;
                    }
.mfpForm .headerFrame .headerTitle 
                    {
                    font-size:14px;
                    color: var(--color-List1-RowTitle2);    
                    vertical-align: center;
                    padding-right:10px;
                    }
.mfpForm .headerFrame .headerTitle.titleCIM
                    {
                    vertical-align: top;
                    }

.mfpForm .headerFrame .dataCIM
                    {
                    color: var(--cyan);    
                    }
.mfpForm .dataFrame .ELSZAMOLT 
                    {
                    text-align:right;    
                    }
                    
                    
.mfpForm .fillRectangleFrame                    
{
    position:relative;
    left:0px;
    top:0px;
    width:100%;
    height:15px;    
    overflow:hidden;
    background:var(--background-List2-RowHover);
    border-radius: 5px;
    
}
.mfpForm .block
{
    background: var(--background-List2-Row);
/*    border:1px solid var(--color-List2-RowBorder);*/
    box-shadow: 0px 0px 3px var(--color-List2-RowShadow);
    border-radius:6px;
    padding:10px;
    margin-bottom:10px;
    
}

/*mfpForm elszamolt szamlalo block*/
/*header*/
.mfpForm .TD-COUNTERNAME {font-size:14px;color:var(--color-List1-RowTitle2)}
.mfpForm .TD-COUNTERDATE {width:100px;text-align:right;font-size:14px;color:var(--color-List1-RowTitle2)}
.mfpForm .TD-COUNTER     {width:120px;text-align:right;font-size:14px;color:var(--color-List1-RowTitle2)}
/*data*/
.mfpForm .ELSZAMOLT_D    {width:100px;text-align:right;font-size:15px;}
.mfpForm .ELSZAMOLT      {width:120px;text-align:right;font-size:15px;}
.mfpForm .DIJNEV         {font-size:15px;}


.mfpForm .TITLEMFPSTATUS {}
.mfpForm .TONERDATUM
{
    color  : var(--color-List1-RowTitle2);
    font-size: 14px;
}
.mfpForm .tilteOldData{
    color: var(--red);
    font-size:12px;
    visibility: hidden;
}
.mfpForm .tilteOldData.visible{
    visibility:visible;
}
.mfpForm .tonerNoData
{
    color: var(--red);
    font-style:italic;
}
.mfpForm .PERC
{
    width:40px;
    color  : var(--color-List1-RowTitle1);
    font-size:14px;
}
.mfpForm .PERCGRAPH
{
    opacity: 0.8;
}
.mfpForm .TONERNEV
{
    color  : var(--color-List1-RowTitle1);
    padding-top:7px;
}
.mfpForm .fillRectanglePerc
{
    position:absolute;
    left:0px;
    top:0px;
    height:100%
}


.mfpGrid
{
    font-size:15px;
}
.mobil .mfpGrid .body .gridRow {height:120px;}
.mfpGrid .tonerStatusShowGrid
{
    overflow:hidden;
    border-radius:5px;
/*    border :1px solid var(--color-List2-BorderHigh);*/
    background: var(--background-List3-Row);
    position:relative;
    display:inline-block;
    width:24%;
/*    max-width:90px;*/
    height:25px;
    padding:1px;
    margin-top:5px;
}
.mfpGrid .tonerStatusShowGrid .PERC{
    position:absolute;
    left:1px;
    top:1px;
    border-radius:5px;
    height:calc(100% - 2px);
}
.mfpGrid .tonerStatusShowGrid .TITLE{
    position:absolute;
    left:0px;
    top:2px;
    height:100%;
    width:100%;
    text-align: center;
    font-size:12px;
    color:white;
}
.mfpGrid .tonerStatusShowGrid .TITLE-text {
    color:white;
    mix-blend-mode: difference;
}
.mfpGrid .tonerStatusShowGrid-1 {visibility: hidden;}

.mfpGrid .greenIcon { background:var(--green); }
.mfpGrid .redIcon   { background:var(--red);   }



/****************************************************************************************
* Export Form CSS
*****************************************************************************************/
.mfpExport                            { max-width:400px; }
.mfpExport .dataFrame                 { top:70px;}
.mfpExport .dataFrame .radioFrame     { padding-Top:5px;}
.mfpExport .dataFrame .radioLabel     { vertical-align:middle; display:inline-block; height:100%;padding-left:5px;}
.mfpExport .dataFrame .radioRow       { vertical-align:middle; display:inline-block; }
.mfpExport .dataFrame .radioRow input { width:20px;height:20px;}