/*
Colors
 dark blue = #005685
 light blue = #57abff
  dotted line blue = #ADBAD9
  grey = #F5F5F5
  skype blue = #c7edfc
*/
/*
:root {
    --main-bg-color: coral; 
	--Box-Border-color: coral; 
	--mainBox-bg-color: #F5F5F5; 
	--menu-bg-color: coral;  
	--menu2-bg-color: coral;  
	--menuOn-bg-color: #F5F5F5;
	--menuOn2-bg-color: #F5F5F5;
	--menuHover-bg-color: #F5F5F5;
	--search-bg-color: white;
	--dottedline-bg-color: #ADBAD9;	
	--box-border-radius: 0px;
	--box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0), 0 0px 0px 0 rgba(0, 0, 0, 0);
	
}
*/

:root {
    --main-bg-color: #005685;
	--Box-Border-color: #005685;
	--mainBox-bg-color: #F5F5F5; 
	--menu-bg-color: #57abff;  
	--menu2-bg-color: #57abff;  
	--menuOn-bg-color: #F5F5F5;
	--menuOn2-bg-color: #F5F5F5;
	--menuHover-bg-color: #005685;
	--search-bg-color: #57abff; 
	--dottedline-bg-color: #ADBAD9;	
	--table-bg-color: #ADBAD9;
	--box-border-radius: 5px;
	--box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	--popupDialogForm-bg-color: #005685;
	--popupDialogForm-text-color: white;
}




/*TABS*/

#tabnavcontainer{clear:both;margin:0;padding:0;text-align:left;background:var(--menu-bg-color);
}

#tabnav{background: linear-gradient(to right,var(--menu-bg-color), var(--menu2-bg-color));;float:left;width:100%;font: normal 11px/13px Verdana, Arial; }
#tabnav ul{margin:0;padding:0;list-style:none;} 

#tabnav li{display:inline;margin:0;padding:0; }


#tabnav a,#tabnavlogin a {float:left; background-color:transparent;   margin:0; padding:0 0 0 7px;text-decoration:none; }


#tabnavww a {float:right;margin:0;padding:0 10px 0 7px;background:none;}

#tabnavwx a {float:right;margin:0;padding:0 0px 0 0px;background:none;}

span.menubutton
{display:block;background-color:transparent; padding:5px 15px 3px 6px; color:#FFF; font-size:12px;

}
/* Commented Backslash Hack hides rule from IE5-Mac \*/

span.menubuttonLO{
	float:right;display:block;padding:5px 15px 3px 6px; color:#FFF;  background:none;font-size:12px;
	}


#tabnav a span {float:none;}
    /* End IE5-Mac hack */



#tabnav a:hover,#tabnavlogin a:hover { 
background-color:var(--menuHover-bg-color);
transform: scale(1.05);
transition: transform 0.3s ease-out;
}
/*#tabnav a.on,#tabnavlogin a.on { background-position:0% -84px; }*/
#tabnav a.on,#tabnavlogin a.on { background-color:var(--menuOn-bg-color);
transform: scale(1.0);
transition: transform 0.5s ease-out;
/*border-top: 1px var(--main-bg-color) solid;*/
/*border-left:1px var(--main-bg-color) solid;*/

}

#tabnav a:hover span,#tabnavlogin a:hover span {  background-color:var(--menuHover-bg-color); color:var(--menu-bg-color);  

}

/*#tabnav a.on span { color:#FFF; background-position:100% -84px; }*/
#tabnav a.on span { color:var(--menu-bg-color); background-color:var(--menuOn-bg-color); 

 
/*border-right:1px var(--main-bg-color) solid;*/
 }


#tabnavww a:hover,#tabnavww a:hover span {color:#F10;}
#tabnavwx a:hover,#tabnavwx a:hover span {color:var(--menu-bg-color);}


#tabnavSide ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 100%;
} 

#tabnavSide li a {	
display: block;
color:#FFF; 
	text-align: left;  
	padding: 10px 10px;
	text-decoration:none; 
	
} 

#tabnavSide li a:hover  {
    background-color:var(--menuHover-bg-color); 
	color:var(--menu-bg-color); 
} 

#tabnavSide a.on   { 
background-color:var(--menuOn-bg-color);
color:var(--menu-bg-color); 
}



#menubuttonSide  span{	
	display: none;
	background-color:transparent;
}

#popupMenuSide {	
	display: none;
	position:relative;
	float:right;	
	top:-35px; 
}



.dropdownMenuSide:hover #popupMenuSide{
    display: inline;		
}

.newCustomerButton {
	display: inline;
	background:none;  
	border:none;
	background-color:var(--menuHover-bg-color); 
	color:var(--menu-bg-color); 
	padding: 10px 10px;
	
}


.backgroundColor {
background-color: var(--main-bg-color);

}
.menuColor {
/*background-color: var(--menu-bg-color);*/
background: linear-gradient(to right,var(--menu-bg-color), var(--menu2-bg-color));
}


table.SummaryTable
{ 
width:100%;
height:100%;
padding-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
font-family: Verdana, sans-serif, Arial;
font-weight: normal;
font-size: 14px;
color: black;
}

table.RetailRates
{ width: 680px;
border-radius: var(--box-border-radius);/*20px 20px 20px 20px;*/
background-color: white;
border-top: 15px var(--main-bg-color) solid;
border-right:1px var(--main-bg-color) solid;
border-left:1px var(--main-bg-color) solid;
border-bottom: 1px var(--main-bg-color) solid;
padding-top: 0px;
padding-bottom: 10px;
padding-left: 0px;
padding-right: 0px;
color: black;
box-shadow: var(--box-shadow);  
}

.DashBoardTable
{ width: 390px;
border-radius: 20px 20px 20px 20px;
margin-left: 5px;
margin-right: 5px;
background-color: white;
border-top: 4px var(--main-bg-color) solid;
border-right:1px var(--main-bg-color) solid;
border-left:1px var(--main-bg-color) solid;
border-bottom: 1px var(--main-bg-color) solid;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 0px;
padding-right: 5px;
color: black;
box-shadow: var(--box-shadow);   
}

table.SearchTable
{ width: 90%;
border-radius: 0px 0px 5px 5px;
background-color: var(--search-bg-color);
border-top: 4px #gray solid;
border-right:1px #gray solid;
border-left:1px #gray solid;
border-bottom: 2px #gray solid;
margin-top: 5px;
margin-bottom: 5px;
padding-top: 0px;
padding-bottom: 20px;
padding-left: 0px;
padding-right: 0px;
font-family: Verdana, sans-serif, Arial;
font-weight: normal;
font-size: 14px;
color: black;
box-shadow: var(--box-shadow);   
}


table.TitleHeader
{ width: 100%;
/*background-color: #F5F5F5;
border-top: 4px #F5F5F5 solid;
border-right:1px #F5F5F5 solid;
border-left:1px #F5F5F5 solid;
border-bottom: 2px #F5F5F5 solid; */
margin-bottom:0px;
margin-left:0px;
padding-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
font-family: Verdana, sans-serif, Arial;
font-weight: normal;
font-size: 14px;
color: black; 
left:-50px;
/*box-shadow: 0 10px 6px -6px #777; */
animation-name: slide;
position: relative;
-webkit-animation: mymove 0.15s 1; /* Safari 4.0 - 8.0 */
animation: mymove 0.15s 1;
animation-fill-mode: forwards;

background: linear-gradient(var(--menuOn-bg-color), var(--menuOn2-bg-color));
}

table.popupDialogForm
{ width: 780px;
border-radius: var(--box-border-radius);/*20px 20px 20px 20px;*/
background-color: white;
border-top: 1px var(--popupDialogForm-bg-color) solid;
border-right:1px var(--popupDialogForm-bg-color) solid;
border-left:1px var(--popupDialogForm-bg-color) solid;
border-bottom: 1px var(--popupDialogForm-bg-color) solid;
padding-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
color: black;
box-shadow: var(--box-shadow);  
}


td.popupDialogFormHeader
{ background-color: var(--popupDialogForm-bg-color) ;
border-bottom: 1px  var(--popupDialogForm-bg-color) solid;
font-family: Verdana, sans-serif, Arial;
font-weight: bold;
font-size: 14px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
color: var(--popupDialogForm-text-color); }


@-webkit-keyframes mymove {
    from {left: -10px;}
    to {left: 0px;}
}

@keyframes mymove {
    from {left: -10px;}
    to {left: 0px;}
}

table.CompanyTable
{ width: 100%;
border-radius: 0px 0px 0px 0px;
background-color: white;
border-top: 15px var(--main-bg-color) solid;
border-right:1px var(--main-bg-color) solid;
border-left:1px var(--main-bg-color) solid;
border-bottom: 1px var(--main-bg-color) solid;
padding-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
font-family: Verdana, sans-serif, Arial;
font-weight: normal;
font-size: 14px;
color: black; 
}

table.CompanyTable2
{ width: 90%;
border-radius: 20px 20px 20px 20px;
background-color: white;
border-top: 1px var(--main-bg-color) solid;
border-right:1px var(--main-bg-color) solid;
border-left:1px var(--main-bg-color) solid;
border-bottom: 2px var(--main-bg-color) solid;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 0px;
padding-right: 0px;
margin-top: 5px;
margin-bottom: 5px;
font-family: Verdana, sans-serif, Arial;
font-weight: normal;
font-size: 14px;
color: black;
box-shadow: var(--box-shadow);   
}

tr.tablestyle
{ 
cursor: pointer;
background-color: transparent;
border-bottom: 1px  var(--main-bg-color) dotted;
text-align: left;
font-family: Verdana, sans-serif, Arial;
font-weight: normal;
font-size: 10px;
padding-top: 4px;
padding-bottom: 4px;
padding-left: 8px;
padding-right: 0px; 
color: black;
}

tr.tablestyleAjax
{ 
cursor: pointer;
background-color: white;
border-bottom: 1px  var(--main-bg-color) dotted;
text-align: left;
font-family: Verdana, sans-serif, Arial;
font-weight: normal;
font-size: 10px;
padding-top: 4px;
padding-bottom: 4px;
padding-left: 8px;
padding-right: 0px; 
color: black;
}

tr.tablestyleAjax:hover {
	background-color:var(--table-bg-color);
	
}

tr.tablestyleAjaxAnimate {
	background-color: green;
animation: backgroundFade 4.0s;
	animation-fill-mode: forwards;
}

td.buttonFormatLeft
{ border-bottom: 1px  #ADBAD9 dotted;
text-align: left;
font-family: Verdana, sans-serif, Arial;
font-weight: normal;
font-size: 10px;
color: black;
padding-top: 4px;
padding-bottom: 4px;
padding-left: 8px;
padding-right: 0px; }

td.buttonFormatRight
{ border-bottom: 1px  #ADBAD9 dotted;
text-align: right;
font-family: Verdana, sans-serif, Arial;
font-weight: normal;
font-size: 10px;
color: black;
padding-top: 4px;
padding-bottom: 4px;
padding-left: 0px;
padding-right: 8px; }

td.hideButton
{ 
border-bottom: 1px  #ADBAD9 solid;
border-top: 1px  #ADBAD9 solid;
border-left: 1px  #ADBAD9 solid;
border-right: 1px  #ADBAD9 solid;
text-align: left;
font-family: Verdana, sans-serif, Arial;
font-weight: bold;
font-size: 10px;
color: black;
padding-top: 2px;
padding-bottom: 2px;
padding-left: 2px;
padding-right: 2px; }

div.counter
{ 
text-align: right;
font-family: Verdana, sans-serif, Arial;
font-weight: normal;
font-size: 10px;
color: black;
padding-top: 4px;
padding-bottom: 4px;
padding-left: 8px;
padding-right: 0px; }

div.exportcsvtext
{ 
text-align: right;
font-family: Verdana, sans-serif, Arial;
font-weight: normal;
font-size: 10px;
color: black;
padding-top: 4px;
padding-bottom: 4px;
padding-left: 8px;
padding-right: 0px; }

div.retailcdrpager
{ 
text-align: center;
font-family: Verdana, sans-serif, Arial;
font-weight: normal;
font-size: 10px;
color: black;
padding-top: 4px;
padding-bottom: 4px;
padding-left: 8px;
padding-right: 0px; }

td.RetailRate
{ 
background-color:transparent;
border-bottom: 1px  var(--main-bg-color) dotted;
text-align: left;
font-family: Verdana, sans-serif, Arial;
font-weight: normal;
font-size: 10px;
color: black;
padding-top: 4px;
padding-bottom: 4px;
padding-left: 8px;
padding-right: 0px; }

td.BreadCrumbs
{ 
/*background-color: lightgray ;
background: -webkit-gradient(linear, left top, left bottom, from(#F5F5F5), to(#F5F5F5));
	background: -moz-linear-gradient(top,  #F5F5F5,  #F5F5F5);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F5F5F5', endColorstr='#F5F5F5'); 
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#F5F5F5', EndColorStr='#F5F5F5')"; 
*/	
text-align: left;
font-family: Verdana, sans-serif, Arial;
font-weight: normal;
font-size: 10px;
color: blue;
padding-top: 4px;
padding-bottom: 4px;
padding-left: 8px;
padding-right: 0px; }

td.RetailRateHeader
{ background-color: var(--main-bg-color) ;

font-family: Verdana, sans-serif, Arial;
font-weight: bold;
font-size: 14px;
padding-top: 0px;
padding-bottom: 4px;
padding-left: 8px;
color: white; }

td.RetailRateMainHeader
{ /*background-color: #F5F5F5;*/

border-bottom: 0px #F5F5F5 solid;
font-family: Verdana, sans-serif, Arial;
font-weight: bold;
font-size: 16px;
padding-top: 4px;
padding-bottom: 4px;
padding-left: 8px;
color: black; 
}




td.rowstyleborder
{ 
color: Black;
border-bottom: 1px  var(--dottedline-bg-color) dotted;
padding-left: 8px;
}

td.rowstyleborderGreen
{ 
color: Green;
border-bottom: 1px  var(--dottedline-bg-color) dotted;
padding-left: 8px;
}

td.rowstyleborderRed
{ 
color: Red;
border-bottom: 1px  var(--dottedline-bg-color) dotted;
padding-left: 8px;
}

.topMenu {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
    "table1" 
	"table2" 
    "table3";
     background-color: transparent;
     color: #444;
    }
	
	
.sideMenu {
    display: grid;
    grid-template-columns: 0.08fr 0.92fr;
    grid-template-areas:
    "table1 table1"
	"table2 table3";
     background-color: transparent;
     color: #444;
    }
	
.billrunwrapper {
    display: grid;
    grid-gap: 0px;
    grid-template-columns: 1fr 0.1fr 1fr 0.1fr 1fr 0.1fr 1fr 0.1fr 1fr;
    grid-template-areas:
    "table1 Arrow1 table2 Arrow2 table3 Arrow3 table4 Arrow4 table5";     
     background-color: transparent;
     color: #444;
    }
	
.wrapper_2_1 {
    display: grid;
    grid-gap: 20px;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
    "table1 table2" 
    "table3 table3";
     background-color: transparent;
     color: #444;
    }
	
.customerwrapper {
    display: grid;
    grid-gap: 20px;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas:
    "table1 table1 table1" 
    "table2 table3 table4";
     background-color: transparent;
     color: #444;
    }

.invoicewrapper {    
    display: grid;
    grid-gap: 20px;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas:
    "table1 table1 table2" 
    "table3 table4 table5";
     background-color: #fff;
     color: #444;
    }
	
.customerinvoicewrapper {    
    display: grid;
    grid-gap: 20px;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
    "table1 table2" 
    "table3 table4";
     background-color: transparent;
     color: #444;
    }
	
.wrapper {    
    display: grid;
    grid-gap: 20px;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas:
    "table1 table2 table3" 
    "table4 table5 table6";
     background-color: #fff;
     color: #444;
    }
	
.wrapper_line1 {    
    display: grid;
    grid-gap: 20px;
    grid-template-columns: 1fr;
    grid-template-areas:
    "table1";
     background-color: #fff;
     color: #444;
    }
	
.wrapper_line2 {    
    display: grid;
    grid-gap: 20px;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
    "table1 table2";
     background-color: #fff;
     color: #444;
    }

		
.wrapper_line3 {    
    display: grid;
    grid-gap: 20px;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas:
    "table1 table2 table3";
     background-color: #fff;
     color: #444;
    }
	
	.table1 {
        grid-area: table1;
    }

    .table2{
        grid-area: table2;
    }

    .table3{
        grid-area: table3;
    }
	
	 .table4{
        grid-area: table4;
    }
	
	 .table5{
        grid-area: table5;
    }
	
	 .table6{
        grid-area: table6;
    }
		
	.boxSmall {        
		margin-left: 5px;
margin-right: 5px;
background-color: white;
border-top: 1px var(--Box-Border-color) solid;
border-right:1px var(--Box-Border-color) solid;
border-left:1px var(--Box-Border-color) solid;
border-bottom: 1px var(--Box-Border-color) solid;
        color: black;
        border-radius:  var(--box-border-radius);
        padding: 20px;
        font-size: 150%;
		box-shadow: var(--box-shadow);  
    }

	.boxMain {        
		margin-left: 5px;
margin-right: 5px;
background-color: var(--mainBox-bg-color);
border-top: 1px var(--Box-Border-color) solid;
border-right:1px var(--Box-Border-color) solid;
border-left:1px var(--Box-Border-color) solid;
border-bottom: 1px var(--Box-Border-color) solid;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
padding-right: 5px;
        color: #fff;
        border-radius:  var(--box-border-radius);
        padding: 20px;
        font-size: 150%;
		box-shadow: var(--box-shadow);  
    }

.boxArrow {        
		margin-left: 5px;
margin-right: 5px;
background-color: white;
border-top: 4px var(--main-bg-color) solid;
border-right:1px var(--main-bg-color) solid;
border-left:1px var(--main-bg-color) solid;
border-bottom: 2px var(--main-bg-color) solid;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
padding-right: 5px;
        color: #fff;
        border-radius: var(--box-border-radius);
        padding: 20px;
        font-size: 150%;
		box-shadow: var(--box-shadow);   		
    }	

	.Arrow {
		margin-top:100%;
		padding: 10px 10px 10px 20px;
		background: transparent;
    background-image: url("../images/Arrow.png");
	background-size:     cover;
    background-repeat: no-repeat;
	background-position: center center;
	}

.round {
	/*position: absolute;*/
    border-radius: 15px;
    border: 1px #000 solid;
	padding: 5px 25px 5px 30px;
	top: 0;
    left: 0;
	z-index: 5;
	margin-right:-30px;
	width:200px;
}

.corner {
	position: relative;
    top: 5px;
    left: -225px;
    height: 20px;
    width: 20px;
	z-index: 10;
    border-radius: 10px;
    border: none;
	background: transparent;
    background-image: url("../images/magnifying.png");
	background-size:     cover;
    background-repeat: no-repeat;
	background-position: center center;  
}


.SearchButton {
	position: relative;
    top: 0px;
    left: -80px;
    height: 27px;
    width: 80px;
	z-index: 10;
    border-radius: 12px;
    border: 1px black solid;
}

.SearchButton:hover { 
 color:var(--menu-bg-color);
background-color:var(--menuHover-bg-color);
}

.search {
	position: relative;
	width: 170px;
    height: 20px;
}
	
.question {	
	/*padding: 20px 20px 20px 20px; */
    margin-right:10px;
    height: 32px;
    width: 32px;
	background: transparent;
    background-image: url('../images/question4.png');
	background-size:     cover;
    background-repeat: no-repeat;
	background-position: center center; 
	display:table;	
}

.TotalStyle {
	Color:black; 
font-size:14px;
}

.RequiredField {
   border-left:3px #951717 solid;   
}

.ReportPage {
	background: white;	
        border-radius: 5px;
 border-top: 1px  gray solid;
      border-left: 1px  gray solid;
      border-right: 1px  #000000 solid;
      border-bottom: 1px  #000000 solid;
-moz-box-shadow: 3px 3px 4px #000;
-webkit-box-shadow: 3px 3px 4px #000;
box-shadow: 3px 3px 4px #000;

font-family: Verdana, sans-serif, Arial;
font-weight: normal;
font-size: 14px;
color: black; 
}

.reportLineTitle1 {	
	padding-top: 25px;
	font-size: 16px;
	font-weight: bold;	
}

.reportLineTitle2 {
	font-size: 12px;
	font-weight: normal;
	padding-bottom: 20px;
}

.reportLineHeader {	
	font-weight: bold;	
	background-color: var(--menu-bg-color) ;
	padding-right:5px;
	padding-left:5px;
}
.reportLineHeader2 {	
	font-weight: bold;	
	border-bottom: 1px  white solid;
	background-color: var(--menuOn-bg-color) ;
	padding-right:5px;
	padding-left:5px;
}

.reportLineFooter {
	padding-top: 5px;
	padding-bottom: 5px;
	font-size: 12px;
	font-weight: bold;
		padding-right:5px;
	padding-left:5px;
	
}
.reportLine {
	font-size: 12px;
	border-bottom: 1px  lightgray solid;
		padding-right:5px;
	padding-left:5px;
}

.StepHeader {
	font-family: Verdana, sans-serif, Arial;
	font-weight: bold;	
	font-size: 14px;
	color: black;
	border-bottom: 1px  lightgray solid;
	padding-top:10px;
	padding-bottom:6px;
}
.StepLine {
	font-family: Verdana, sans-serif, Arial;
	font-weight: normal;	
	font-size: 12px;
	color: black;
	padding-top:6px;
	padding-bottom:6px;
}
.StepLineField {
	font-family: Verdana, sans-serif, Arial;
	font-weight: normal;	
	font-size: 11px;
	color: black;
	padding-left:20px;
	padding-top:1px;
	padding-bottom:6px;	
}
.StepLineImportant {
	font-family: Verdana, sans-serif, Arial;
	font-size: 12px;
	color: #951717;
	padding-bottom:6px;
}
.StepLineNote {
	font-family: Verdana, sans-serif, Arial;
	font-size: 12px;
	color: grey;
	padding-bottom:6px;
}

.popupDialogNew {
	
	 top: 25%;
   left: 33%;
	display: none;
	 position: fixed; 
	 background-color:white;
	 z-index: 999; 
	  opacity:0;
   
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); 
transition:  opacity 0.2s ease-in;
	border: 20px solid white;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
    
}

.backgroundGreyOut {
	 width:100%;
      height:100%; /* make sure you have set parents to a height of 100% too*/
      position: absolute;
      left:0; top:0;
      z-index:10; 
	  background-color:grey;
	  opacity:0.5;
	  display:none;
}


.dropdownMenu {
    float: left;	

}

#popupMenu{	
top:38px;
padding: 5px 5px;
    display: none;
    position: absolute;
    background-color: white;    
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

#popupMenu a{
    float: none;
    color: var(--menu-bg-color);
    text-decoration: none;
    display: block;
    text-align: left;
	background-color: white;  	
}

.dropdownMenu:hover #popupMenu{
    display: block;
	animation: fadeInFromNone 0.5s;
	animation-fill-mode: forwards;
}

@keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }

    50% {
        display: block;
        opacity: 0;
    }

    100% {
        display: block;
        opacity: 1;
    }
}


@keyframes fadeOutToNone {
    0% {
       display: block;
	   transform:translate(0,0);
	   opacity:1;
    }
	
	 10% {
       display: block;
	   transform:translate(0,0);
	   opacity:1;
    }

    80% {
        display: block;
		transform:translate(0,0);
		opacity:1;
    }

    100% {
         display: none;        
		transform:translate(1000px,0);
		opacity:0;
    }
	 
}


@keyframes backgroundFade {
    0% {
       background-color: green;   
    }
		
    100% {
		background-color: transparent;    
	}
		
}

@keyframes backgroundHover {    
     background-color:  var(--table-bg-color);   
}

.popupDialogConfirmation {
	
	 top: 0%;
    right:0px;
	display: none;
	 position: absolute; 
	 background-color:white;
	 z-index: 999; 
	  opacity:0;
     
   
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); 
transition:  opacity 0.2s ease-in;
	border: 20px solid white;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
    
	animation: fadeOutToNone 4.0s; 
	animation-fill-mode: forwards;
}

.rowchanger  {background-color: white;}
.rowchanger:hover {background-color:  var(--table-bg-color) ;}


/*

.button { 
 font-family: Verdana, sans-serif, Arial;
 font-weight: normal;
 font-size: .7em;
 background-color: #D7E5F2; 
 color: #102132; 
 margin-left: 3px; 
 margin-top: 0px; 
 margin-bottom: 1px; 
}
*/





.invoicePaid {
	width: 0;
height: 0;
border-style: solid;
border-width: 0 0 40px 40px;
border-color: transparent transparent green transparent;
margin-top:-20px;
}