.tabButton[data-v-1fcb34f6] {
  text-decoration: none;
}

.appShell[data-v-8abc4430] {
  display: grid;
  grid-template-rows: 62px minmax(0, 1fr) 37px;
}
.appShell.withTabs[data-v-8abc4430] {
  grid-template-rows: 62px 30px minmax(0, 1fr) 37px;
}
header[data-v-8abc4430],
footer[data-v-8abc4430],
.appShell > div[data-v-8abc4430] {
  overflow: hidden;
  /* clip, not hidden: the 31 px tab links sit in a 30 px layer, and focusing or clicking one scrolled the hidden
     layer by 1 px (tab bar 1 px high). Clipped boxes cannot scroll. */
  overflow: clip;
}
main[data-v-8abc4430] {
  position: relative;
  overflow: auto;
}

.loginHost[data-v-aa0cc663] {
  overflow: auto; /* GWT clips; a short window scrolls instead */
}
.oauthButton[data-v-aa0cc663] {
  width: 24px;
  height: 25px;
  cursor: pointer;
  margin-right: 7px;
  padding: 5px 40px;
  border: 1px solid #e1e1e1;
  background-color: #e5e5e5;
}

.preloginHost[data-v-2c8e4565] {
  overflow: auto; /* GWT clips; a short window scrolls instead */
}
/* Order matters: AlarmServer.css first, datagrid-gwt.css is the base of the other dg-* variants. No reset. */
/* AlarmServer.css is the GWT CSS verbatim except the font block: Inter 400/700 load from lossless woff2 repacks of the GWT TTFs
   (same 2926 glyphs, no subsetting; fontTools + brotli, flavor woff2) and the unused Oswald @font-face is gone. */
/* Common */
/* Teltonika brand typefaces: Oswald (headings, uppercase) + Inter (body/UI) */

@font-face {
    font-family: Inter;
    src: url("/assets/Inter-Regular-BmffMZuw.woff2") format("woff2");
    font-weight: 400;
}
@font-face {
    font-family: Inter;
    src: url("/assets/Inter-Bold-hPAJUaT5.woff2") format("woff2");
    font-weight: 700;
}


* {
	font-family: Inter, Arial, sans-serif !important;
	font-size: inherit;
}

.brandHeading {
	font-family: Oswald, Arial, sans-serif !important;
	text-transform: uppercase;
}



.cellButton {
height: 25px;
width: 164px;
text-align: center;
margin-left: 9px;
margin-right: auto;
cursor: pointer;
}




.invisibleButton {
height: 30px;
width: 138px;
border-top: 1px solid #F4F4F4;
text-align: center;
cursor: pointer;
}

.button {
height: 30px;
width: 30px;
border: 0px solid #F4F4F4;
text-align: center;
border-radius: 5px;
margin-left: auto;
margin-right: auto;
}




.gwt-Button {
cursor: pointer;
margin-bottom:10px;
margin-right:10px;
height: 36px;
width: 150px;
border-top: 1px solid #F4F4F4;
text-align: center;
/*border-radius: 5px;*/
border: 0px solid #CBCBCB;
/*box-shadow: inset 0 -8px 10px rgba(0,0,0,0.15), 0 1px 0 rgba(255,255,255, 0.3), inset 0 1px 0 rgba(255,255,255, 0.3);*/
background: rgb(229,229,229);
/*background: -moz-linear-gradient(top, rgba(229,229,229,1) 0%, rgba(192,192,192,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(229,229,229,1)), color-stop(100%,rgba(192,192,192,1)));
background: -webkit-linear-gradient(top, rgba(229,229,229,1) 0%,rgba(192,192,192,1) 100%);
background: -o-linear-gradient(top, rgba(229,229,229,1) 0%,rgba(192,192,192,1) 100%);
background: -ms-linear-gradient(top, rgba(229,229,229,1) 0%,rgba(192,192,192,1) 100%);
background: linear-gradient(to bottom, rgba(229,229,229,1) 0%,rgba(192,192,192,1) 100%);
//filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5e5e5', endColorstr='#c0c0c0',GradientType=0 );*/
}

.gwt-ButtonEditForm {
cursor: pointer;
margin-top:5px;
margin-Left:5px;
height: 36px;
width: 120px;
border-top: 1px solid #F4F4F4;
text-align: center;
border-radius: 5px;
border: 1px solid #CBCBCB;
box-shadow: inset 0 -8px 10px rgba(0,0,0,0.15), 0 1px 0 rgba(255,255,255, 0.3), inset 0 1px 0 rgba(255,255,255, 0.3);
background: rgb(229,229,229);
/*background: -moz-linear-gradient(top, rgba(229,229,229,1) 0%, rgba(192,192,192,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(229,229,229,1)), color-stop(100%,rgba(192,192,192,1)));
background: -webkit-linear-gradient(top, rgba(229,229,229,1) 0%,rgba(192,192,192,1) 100%);
background: -o-linear-gradient(top, rgba(229,229,229,1) 0%,rgba(192,192,192,1) 100%);
background: -ms-linear-gradient(top, rgba(229,229,229,1) 0%,rgba(192,192,192,1) 100%);
background: linear-gradient(to bottom, rgba(229,229,229,1) 0%,rgba(192,192,192,1) 100%);
//filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5e5e5', endColorstr='#c0c0c0',GradientType=0 );*/
}

.flatButton {
cursor: pointer;
margin-top:5px;
heigth:20px;
}

.gwt-Button:active {
cursor: pointer;
}

.gwt-Button:disabled {
cursor: default;
background: rgb(199,199,199);
box-shadow: inset 0 0 0 0;
}

.brandPrimaryButton {
background: #0061FC;
color: #FFFFFF;
border: 0px;
}

.brandPrimaryButton:disabled {
background: rgb(199,199,199);
}

.checkButtonAdditional{
  margin-top: 32px;
  margin-right: 4px;
}

.gwt-TextBox {
height: 30px;
width: 200px;
/*border-radius: 5px;
box-shadow: 1px 1px 10px 0px rgb(182, 182, 182) inset;*/
font-size: 14px;
color: rgb(121, 121, 121);
position: relative;
float: left;
margin-top:5px;
margin-bottom:5px;
padding-left:8px;
/*border-top: 2px solid rgb(145, 145, 145);
border-left: 2px solid rgb(145, 145, 145);
border-bottom: 2px solid rgb(222, 222, 222);
border-right: 2px solid rgb(222, 222, 222);*/
}

.gwt-ListBox {
height: 30px;
width: 200px;
/*border-radius: 5px;
box-shadow: 1px 1px 10px 0px rgb(182, 182, 182) inset;*/
font-size: 14px;
color: rgb(121, 121, 121);
position: relative;
float: left;
margin-top:5px;
margin-bottom:5px;
padding-left:8px;
/*border-top: 2px solid rgb(145, 145, 145);
border-left: 2px solid rgb(145, 145, 145);
border-bottom: 2px solid rgb(222, 222, 222);
border-right: 2px solid rgb(222, 222, 222);*/
}

.gwt-DateBox {
height: 30px;
width: 200px;
/*border-radius: 5px;
box-shadow: 1px 1px 10px 0px rgb(182, 182, 182) inset;*/
font-size: 14px;
color: rgb(121, 121, 121);
position: relative;
float: left;
margin-top:5px;
margin-bottom:5px;
padding-left:8px;
/*border-top: 2px solid rgb(145, 145, 145);
border-left: 2px solid rgb(145, 145, 145);
border-bottom: 2px solid rgb(222, 222, 222);
border-right: 2px solid rgb(222, 222, 222);*/
}

.flexTableListBox {
font-size: 14px;
width:100%;
}

.flexTableDateBox {
font-size: 14px;
width:100%;
}

.flexTableTextBox {
font-size: 14px;
width: 100%;
}

.flatTextBox {
font-size: 14px;
width:220px;
}

.flatTextBoxDisabled {
font-size: 14px;
width:220px;
background-color:#F1F1F1;
}

.flatTextBox2 {
font-size: 14px;
width:300px;
}

.flatWidget {
font-size: 14px;
width:226px;
heigth:24px
}



.flatSearchTextBox
{
margin-left: 8px;
margin-top: 20px;
margin-right: 2px;
width: 318px;
background: none repeat scroll 0% 0% #DDE9FB;
border: 1px solid #003FB4;
font-size: 14px;
}

.ManageTextBox {
height: 30px;
width: 165px;
border-radius: 5px;
box-shadow: 1px 1px 10px 0px rgb(182, 182, 182) inset;
font-size: 14px;
color: rgb(121, 121, 121);
position: relative;
float: left;
margin-top:5px;
margin-left:5px;
padding-left:8px;
border-top: 2px solid rgb(145, 145, 145);
border-left: 2px solid rgb(145, 145, 145);
border-bottom: 2px solid rgb(222, 222, 222);
border-right: 2px solid rgb(222, 222, 222);
}

.gwt-DateBox {
height: 30px;
width: 200px;
border-radius: 5px;
box-shadow: 1px 1px 10px 0px rgb(182, 182, 182) inset;
font-size: 14px;
color: rgb(121, 121, 121);
position: relative;
float: left;
margin-top:5px;
margin-bottom:5px;
padding-left:8px;
border-top: 2px solid rgb(145, 145, 145);
border-left: 2px solid rgb(145, 145, 145);
border-bottom: 2px solid rgb(222, 222, 222);
border-right: 2px solid rgb(222, 222, 222);
}

.gwt-TextBox {
height: 30px;
width: 200px;
/*border-radius: 5px;*/
/*box-shadow: 1px 1px 10px 0px rgb(182, 182, 182) inset;*/
font-size: 14px;
color: rgb(121, 121, 121);
position: relative;
float: left;
/*margin-top:5px;
margin-bottom:5px;*/
padding-left:8px;
/*border-top: 2px solid rgb(145, 145, 145);
border-left: 2px solid rgb(145, 145, 145);
border-bottom: 2px solid rgb(222, 222, 222);
border-right: 2px solid rgb(222, 222, 222);*/
}

.gwt-SuggestBox {
height: 30px;
width: 200px;
/*border-radius: 5px;
box-shadow: 1px 1px 10px 0px rgb(182, 182, 182) inset;*/
font-size: 14px;
color: rgb(121, 121, 121);
position: relative;
float: left;
/*margin-top:5px;
margin-bottom:5px;*/
padding-left:8px;
/*border-top: 2px solid rgb(145, 145, 145);
border-left: 2px solid rgb(145, 145, 145);
border-bottom: 2px solid rgb(222, 222, 222);
border-right: 2px solid rgb(222, 222, 222);*/
}

.gwt-SuggestBoxPopup{
background-color: rgb(233, 233, 233);
/*width: 212px;*/
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}

.gwt-SuggestBoxPopup .item-selected{
background-color: rgb(220, 220, 220);
}

.filterInput {
height: 30px;
width: 160px;
border-radius: 5px;
box-shadow: 1px 1px 10px 0px rgb(182, 182, 182) inset;
font-size: 14px;
color: rgb(121, 121, 121);
position: relative;
float: left;
margin-top:5px;
margin-bottom:5px;
padding-left:8px;
border-top: 2px solid rgb(145, 145, 145);
border-left: 2px solid rgb(145, 145, 145);
border-bottom: 2px solid rgb(222, 222, 222);
border-right: 2px solid rgb(222, 222, 222);
}

.dateInput {
height: 30px;
width: 110px;
border-radius: 5px;
box-shadow: 1px 1px 10px 0px rgb(182, 182, 182) inset;
font-size: 14px;
color: rgb(121, 121, 121);
position: relative;
float: left;
margin-top:5px;
margin-bottom:5px;
padding-left:8px;
border-top: 2px solid rgb(145, 145, 145);
border-left: 2px solid rgb(145, 145, 145);
border-bottom: 2px solid rgb(222, 222, 222);
border-right: 2px solid rgb(222, 222, 222);
}


.serialNumber {
height: 30px;
width: 150px;
border-radius: 5px;
box-shadow: 1px 1px 10px 0px rgb(182, 182, 182) inset;
font-size: 14px;
color: rgb(121, 121, 121);
position: relative;
border-top: 2px solid rgb(145, 145, 145);
border-left: 2px solid rgb(145, 145, 145);
border-bottom: 2px solid rgb(222, 222, 222);
border-right: 2px solid rgb(222, 222, 222);
}

.version {
height: 30px;
width: 70px;
border-radius: 5px;
box-shadow: 1px 1px 10px 0px rgb(182, 182, 182) inset;
font-size: 14px;
color: rgb(121, 121, 121);
position: relative;
border-top: 2px solid rgb(145, 145, 145);
border-left: 2px solid rgb(145, 145, 145);
border-bottom: 2px solid rgb(222, 222, 222);
border-right: 2px solid rgb(222, 222, 222);
}

.modType {
height: 32px;
width: 100px;
border-radius: 5px;
font-size: 14px;
color: rgb(121, 121, 121);
position: relative;
}




.projectPanel
{
	margin-left:15px;
	margin-top:10px;
	margi-bottom:10px;
	width:100%;
	font-size:15px;
}


.projectDetailPanel
{
	margin-top:10px;
	margin-bottom:10px;
	width: 100%;
	font-size:15px;
}

.settingsDetailPanel
{
	margin-left:15px;
	margin-bottom:5px;	
	margin-top:5px;
	font-size:15px;
}


.settingsDetailText
{
	margin-top: 10px;
    font-size: 14px;
    width:170px;
}

.settingsMessageControlBigLabelText
{
	font-size:18px;
}

.settingsMessageControlText
{
    font-size: 14px;
    width:140px;
}

.messageEditDialogGlass
{
    background-color: black;
    opacity: 0.1;
}


.settingsError
{
	margin-top: 11px;
	margin-left:7px;
	color: red;

}


.panelHeader{
	
font-weight: bold;
font-size: 15px;
padding-left:10px;
padding-top:10px;
margin:7px;
width: 100%;
height: 41px;
border-bottom: 1px solid #D7D7D7;
box-shadow: 0px 3px 14px -2px gray;
color: #4A4A4A;
background: #fdfdfd;
background: -moz-linear-gradient(top, #fdfdfd 0%, #e1e1e1 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fdfdfd), color-stop(100%,#e1e1e1));
background: -webkit-linear-gradient(top, #fdfdfd 0%,#e1e1e1 100%);
background: -o-linear-gradient(top, #fdfdfd 0%,#e1e1e1 100%);
background: -ms-linear-gradient(top, #fdfdfd 0%,#e1e1e1 100%);
background: linear-gradient(to bottom, #fdfdfd 0%,#e1e1e1 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fdfdfd', endColorstr='#e1e1e1',GradientType=0 );
}


.flatLabel-Button{
	
font-weight: bold;
font-size: 15px;
padding-top:16px;
color: #4A4A4A;
cursor:pointer;
text-align:right;
}

.flatLabel-ButtonDisabled{	
font-weight: bold;
font-size: 15px;
padding-top:16px;
color: #D3D3D3;
text-align:right;
}


.flatPanelHeader{
width: 100%;
box-sizing: border-box;
font-weight: bold;
font-size: 15px;
margin: 16px 0px 3px;
color: #4A4A4A;

}

.imageProjectButton{
   display: block;
   margin-left: auto;
   margin-right: auto;
   cursor: pointer;  
}

.borderBottom
{
	border-bottom: 2px solid #6F7277;

}
.projectText{
   font-size: 15px;
   margin: 0 auto;
}

.text{  
   font-size: 15px;
   margin-left:10px;
}


.projectLink a{
color:red;
 font-size: 15px;
}
.projectLink a:hover{
color:red;
 font-size: 15px;
}
.projectLink a:visited{
color:red;
}
.projectLink a:active{
color:red;
}

.gwt-HyperLink a{ 
    color: red; 
} 


.helpLink{
 font-size: 13px;
 margin-right:15px;
 margin-left:5px;
}

.helpLink a{
color:blue;
}
.helpLink a:hover{
color:red;
}
.helpLink a:visited{
color:purple;
}
.helpLink a:active{
color:red;
}




.dockPanel {
width: 100%;
height: 100%;
position: absolute;
/*background-color: white;
//left: 50%;
//top: 0%;
//margin-left: -512px;*/
margin-top: 0px;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
margin: auto;
}


.mainBackground {
	background-color: #EFF5FD;
	background-image: repeating-linear-gradient(-45deg, rgba(0,26,119,0.05) 0px, rgba(0,26,119,0.05) 2px, transparent 2px, transparent 40px);
	background-attachment: fixed;
}

.shadow {
  -moz-box-shadow: 5px 5px 5px #ccc;
  -webkit-box-shadow: 5px 5px 5px #ccc;
  box-shadow: 5px 5px 5px #ccc;
}

.borderBoxing {
	box-sizing: border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
}

.errorLabel {
    color: red;
	font-style: italic;
}

.statusLabel {
	color: green;	
	
}

.flatStatusLabel {
	color: green;
	font-size:14px;
}

.systemStatusLabel {
	max-width: 660px;
	white-space: normal;
	word-wrap: break-word;
}

.required {
	color: red;
	font-weight:bold;
	font-size: 1.4em;
	text-shadow: #ddf 1px 1px 0;
}

.link {
  cursor: pointer;

  color:#20293A;
  font-weight:bold;
 /* text-shadow: #ddf 1px 1px 0;*/
  font-size:14px;
}

.linkblack {
  cursor: pointer;
  color: #20293A;
  text-shadow: #ddf 1px 1px 0;
}

.linkBlue {
  cursor: pointer;
  color: blue;
  margin-right:20px;
}

.logoPanel
{
width: 100%;
height: 62px;
background-color: #001A77;
background-repeat: no-repeat;
position: relative;
}

.headerSearchGroup
{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}

.signoutLabel
{
   cursor: pointer;
   font-size: 18px;
 /*  font-weight: bold;*/
   color: rgb(255, 255, 255);
   margin: 45px 0px 0px;
   width: 100%;
   text-align:right;
}



.srchfield {
padding-left:8px;
margin-top: 24px;
height: 30px;
width: 232px;
border-radius: 5px;
box-shadow: 1px 1px 10px 0px rgb(182, 182, 182) inset;
font-style: italic;
font-size: 13px;
color: rgb(121, 121, 121);
position: relative;
float: left;
border-top: 2px solid rgb(145, 145, 145);
border-left: 2px solid rgb(145, 145, 145);
border-bottom: 2px solid rgb(222, 222, 222);
border-right: 2px solid rgb(222, 222, 222);
}



.flatSearchButton {
position: relative;
cursor: pointer;
margin-left:1px;
}

.magnifier {
margin-top: 24px;
height: 36px;
width: 40px;
position: relative;
float: left;
border-bottom-right-radius: 5px;
border-top-right-radius: 5px;
margin-left: -20px;
border-bottom: 2px inset #eeeeee;
border-top: 2px inset;
border-left: 1px inset;

border-top: 2px solid rgb(145, 145, 145);
border-left: 1px solid rgb(145, 145, 145);
border-bottom: 2px solid rgb(222, 222, 222);
border-right: 2px solid rgb(222, 222, 222);
}


.signoutxt {
color: rgb(255, 255, 255);
margin-left: 12px;
margin-top: -2px;
font-size: 14pt;
}


.systemListPanel
{
background-color: #E2E2E2;
width: 100%;
}



.eventAlarm
{
  color:red;
  font-weight:bold;
  /*background-color: #FFD6CC;*/

}

.eventTrouble
{

 /*background-color: #FFFFC9;*/
}

.eventArmDisarm
{
 /* background-color: #D4F0C7;*/
}

.eventNewDate
{

 /* background-color: #f5f5f5;
  padding-right:15px;
  text-align:right;*/
}




.footer{
margin-left:330px;
position: relative;
top: 8px;
}


.Arm, td.Arm{
	padding: 2px 0px 0px 5px;
    border-bottom: hidden;
    border-left: hidden;
    border-top: hidden;
    border-right:hidden;
    text-align:center;		
}

.Alarm, td.Alarm{
	padding: 2px 0px 0px 0px;
    border-bottom: hidden;
    border-left: hidden;
    border-top: hidden;
    border-right: hidden;
    text-align:center;	
	
}

VoucherControl, td.VoucherControl{
	padding: 2px 0px 0px 15px;
    border-bottom: hidden;
    border-left: hidden;
    border-top: hidden;
    border-right: hidden;
}

.Trouble, td.Trouble{
	padding: 2px 0px 0px 14px;
    border-bottom: hidden;
    border-left: hidden;
    border-top: hidden;
    border-right: hidden;	
}

.imageButtonCell, td.imageButtonCell{
	padding: 1px 0px 0px 0px;
}

.prepaidTo , td.prepaidTo
{
  border: hidden;
}

.lisView{
	margin:8px;	
	padding:8px;
	border: 1px solid #C9C9C9;
}

.modulesListView{
	margin:8px;	
	padding:10px;
	border: 1px solid #C9C9C9;
	width: 96%;
    height: 93%;	
}

.lastModuleColumn , td.lastModuleColumn
{
  border: hidden;
}



.simple {
  cursor: default;
  color: #20293A;
  text-decoration: none; 
  text-shadow: #ddf 1px 1px 0;
}

.linkunderline {
  cursor: pointer;
  color: #20293A;
  text-shadow: #ddf 1px 1px 0;   
  text-decoration: underline; 
}



.linkPanel:hover {
	background: #93C3FA;
}

.linkPanel:active {
	background: #DEEBFA;
}

.clickable {
	cursor: pointer;
}
.videoButton {
	cursor: pointer;
	margin-right:30px;
	margin-top:6px;
	height:20px;
	width:20px;
}
.biggerVideoButton {
	cursor: pointer;
	margin-right:30px;
	height:30px;
	width:30px;
}

.notificationPanel {
	background: #F2340A;
	border: 1px solid black;
	font-weight: bold;
}

.bigCountLabel {
	font-size: 18px;
	font-weight: bold;
}

.logoLabel {
	font-size: 20px;
	font-weight: bold;
	width:84px;
	color: #FFC9C9;
	margin-left: 3px;
	margin-bottom: 3px;
}

.filterPanel {
/*		background-image: url('background1.png');*/
/*	background: #aecde5; /* Old browsers */
/*	background: -moz-linear-gradient(top, #aecde5 0%, #93c0e2 64%, #95cfe2 100%); /* FF3.6+ */
/*	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#aecde5), color-stop(64%,#93c0e2), color-stop(100%,#95cfe2)); /* Chrome,Safari4+ */
/*	background: -webkit-linear-gradient(top, #aecde5 0%,#93c0e2 64%,#95cfe2 100%); /* Chrome10+,Safari5.1+ */
/*	background: -o-linear-gradient(top, #aecde5 0%,#93c0e2 64%,#95cfe2 100%); /* Opera 11.10+ */
/*	background: -ms-linear-gradient(top, #aecde5 0%,#93c0e2 64%,#95cfe2 100%); /* IE10+ */
/*	background: linear-gradient(top, #aecde5 0%,#93c0e2 64%,#95cfe2 100%); /* W3C */
/*	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aecde5', endColorstr='#95cfe2',GradientType=0 ); /* IE6-9 */
}
.logfilter{
height: 26px;
width: 338px;
font-size: 13px;
margin-bottom: 3px;
margin-left: 10px;
padding-top: 3px;
border: 1px #e1e1e1 solid;
color: #4A4A4A;
background: #f0f0f0;
background: -moz-linear-gradient(top, #fdfdfd 0%, #e1e1e1 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fdfdfd), color-stop(100%,#e1e1e1));
background: -webkit-linear-gradient(top, #fdfdfd 0%,#e1e1e1 100%);
background: -o-linear-gradient(top, #fdfdfd 0%,#e1e1e1 100%);
background: -ms-linear-gradient(top, #fdfdfd 0%,#e1e1e1 100%);
background: linear-gradient(to bottom, #fdfdfd 0%,#e1e1e1 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fdfdfd', endColorstr='#e1e1e1')

}

.reqStyle{
width: 333px;
font-size: 13px;
margin-bottom: 6px;
margin-left: 14px;
}

.sysInfoLabel{
margin-left:15px;
font-size: 13px;
}
.mailLabel{
margin-left:0px;
margin-right:3px;
font-size: 15px;
margin-top:1px;
}

.mailDeleteClickable {
	cursor: pointer;
	margin-top:6px;
	margin-right:15px;
	margin-left:6px;
}


.selectedSystemNamePanelWhite {
width: 100%;
height: 49px;
background-color: #FFFFFF;
margin-left: 15px;
margin-right: 12px;
margin-top: 9px;
margin-bottom: 9px;
position: relative;
border-radius: 6px;
box-shadow: 0px 0px 10px 0px grey;
display: block;
}

.selectedSystemNamePanel{
width: 100%;
height: 43px;
font-weight: bold;
color: #20293A;
background-color: #E2E2E2;
margin-left: 3px;
margin-top: 3px;
border-radius: 5px;
font-size: 15pt;
position: relative;
float: left;
}

.disclosurePanel{
width: 100%;
background-color: #FFFFFF;
border-radius: 6px;
margin-left: 10px;
margin-right: 12px;
margin-bottom: 5px;
position: relative;
box-shadow: 0px 0px 6px 0px grey;
display: block;
}

.disclosurePanelHeader{
color: #353535;
display: block;
float: left;
font-size: 12pt;
font-weight: bold;
padding:10px;
}


.disclosureFlatPanel{
width: 100%;
background-color: #FFFFFF;
margin-bottom: 0px;
position: relative;
display: block;
margin-top:11px;
}

.disclosureFlatPanelHeader{
color: #353535;
display: block;
float: left;
font-size: 16px;
font-weight: bold;
padding:5px;
}


.detailsPanel {
    width: 100%;
    height: 100%;
    background-color: #EFF5FD;
    background-image: repeating-linear-gradient(-45deg, rgba(0,26,119,0.05) 0px, rgba(0,26,119,0.05) 2px, transparent 2px, transparent 40px);
    background-attachment: fixed;
}

.detailsPanelInner {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.distributorInstallationsPanel {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.biSystemInfoPanel {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.messagesListPanel {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.moduleCatalogPanel {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.newModuleSoldToUserPanel {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.registrationsGrid {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.systemsGrid {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.userLookupPanel {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.wdHistoryPanel {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.detailsPanelTopHeader {
	font-weight:bold;
  	color: #4b4a4a;
	margin-top: 3px;
	padding-bottom: 3px;
	border-bottom: 2px solid #6f7277;
  	text-shadow: #ddf 1px 1px 0;
}

/* Send message popup */
.closeButton {
	padding: 1px;
	cursor: pointer;
}

/* Message */
.messageRightSide {
  border-left: 1px solid #6f7277;
}

.messageHeader {
  font-weight:bold;
  color: #4b4a4a;
  text-shadow: #ddf 1px 1px 0;
  border-bottom: 2px solid #8f9297;
  padding-left: 15px;
}

.messageText {
  padding: 5px;
  font-size: 1.1em;
}

/* Menu */
.menuPanel {
	height: 66px;
	width: 100%;	
}



.searchText {
	font-size: 13px !important;
	height: 16px !important;
}

.simpleButton:disabled {
	color: grey;
}

.tabButton img {
	padding-right: 5px;
}

.tabButton {
  color: #20293A;
  text-shadow: 1px 1px 1px white;
  font-size: 14px !important;
  height: 25px;
  position: relative;
  float: left;
  text-align: center;
  padding-top: 2px;
  padding-left: 2px;
  padding-right: 2px;
  margin-right: 2px;
  border-left: solid black 2px;
  border-right: solid black 2px;
  border-bottom: solid black 2px;
  border-top: solid black 2px;
  background : white;
}

.tabButtonSelected {
text-shadow: 1px 1px 1px #c1c1c1;
font-weight: bold;
	
}

.tabButton:hover {
text-shadow: 1px 1px 1px #c1c1c1;
font-weight: bold;
background : white;

}

.menuButton img {
	padding-right: 5px;
}

.menuButton {
color: #1A1A1A;
text-shadow: 1px 1px 1px white;
font-size:18px !important;
height: 46px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
position: relative;
float: left;
text-align: center;
padding-top:10px;
padding-left:7px;
padding-right:7px;
margin-right: 2px;
background: #e5e5e5;
background: -moz-linear-gradient(top,  #e5e5e5 0%, #c1c1c1 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e5e5e5), color-stop(100%,#c1c1c1));
background: -webkit-linear-gradient(top,  #e5e5e5 0%,#c1c1c1 100%);
background: -o-linear-gradient(top,  #e5e5e5 0%,#c1c1c1 100%);
background: -ms-linear-gradient(top,  #e5e5e5 0%,#c1c1c1 100%);
background: linear-gradient(to bottom,  #e5e5e5 0%,#c1c1c1 100%);
}



.menuButton:active {
	background: #22627A;
	color: #20293A;
}

.menuButtonSelected {
color: white;
text-shadow: 1px 1px 1px #c1c1c1;
background: #404040;
background: -moz-linear-gradient(top,  #404040 0%, #191919 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#404040), color-stop(100%,#191919));
background: -webkit-linear-gradient(top,  #404040 0%,#191919 100%);
background: -o-linear-gradient(top,  #404040 0%,#191919 100%);
background: -ms-linear-gradient(top,  #404040 0%,#191919 100%);
background: linear-gradient(to bottom,  #404040 0%,#191919 100%);
	
}

.menuButton:hover {
color: white;
text-shadow: 1px 1px 1px #c1c1c1;
background: #404040;
background: -moz-linear-gradient(top,  #404040 0%, #191919 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#404040), color-stop(100%,#191919));
background: -webkit-linear-gradient(top,  #404040 0%,#191919 100%);
background: -o-linear-gradient(top,  #404040 0%,#191919 100%);
background: -ms-linear-gradient(top,  #404040 0%,#191919 100%);
background: linear-gradient(to bottom,  #404040 0%,#191919 100%);

}

.submenuHeader {
  text-align: center;
  font-weight:bold;
  border-bottom: 2px solid #6f7277;
}

/* User registration */
.registrationDisclamerPanel {
	background:#e1e1e1;
	/*border-radius: 5px;*/	
	padding-left:10px;
	padding-top:5px;
	padding-bottom:5px;
	padding-right:10px;
}



/*
 *
 * Login panel 
 *
 *
 */
 
 .loginHeader{
 height: 44px;
 width: auto;
 }
 
  .loginFooter{
  	font-family: Arial, sans-serif !important;
  	text-align: center;
 	margin-top:15px; 
 	color: #989898;
 }

.loginPanel {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  background:#FFFFFF;
 /* border-radius: 5px;*/
  padding: 5px;
  font-size:14px;
}

.loginPanel .logo {
	font-weight: bold;
	margin-mottom:15px;
}

.langPanel
{
	margin-top:15px;
	margin-bottom:20px;	
	margin-left:auto;
    margin-right:auto;		
}
.flag{	
	margin-right:17px;
	margin-left:17px;
	cursor: pointer;
}



/*
 *
 * Installed modules summary view
 *
 */


.bonusAwaitsHint {
	font-size:13px;
	color:red;
	padding:5px 0px 0px 10px
	
}

.rewardedHint {
	font-size:13px;
	color:blue;
	padding:5px 0px 0px 10px
}

.modulesSummaryTable {
	padding: 75px 35px 10px 10px;
	font-size:13px;
}

.modulesSummaryTable .oddRow {
	background: #F3F7FB;
}

.modulesSummaryTable .itemRow td {
	padding: 4px 5px 5px 3px;
}

.modulesSummaryTable td {
	padding: 0px;
}

.modulesSummaryTable .groupTable {
	border: 1px solid #B0E3F7;
}

.modulesSummaryTable .groupTable td {
	padding: 4px 5px 5px 0;
}

.installedModulesChartTable td {
	padding: 5px 0 0 0;
	font-size:13px;
}

.chart{
margin-top:10px;
margin-bottom:20px;
}

/*
 *
 * Installer registration
 *
 */
 
 .gwt-DialogBox {
	background:#e1e1e1;
	/*border-radius: 5px;
	padding:1px;
	box-shadow: 0px 3px 14px -2px gray;*/
	/*border:1px solid #E1E1E1;*/
}

 .gwt-DialogBox .Caption{
  height:22px;
  padding:5px;
 		
 } 
 
.gwt-DialogBox .dialogMiddleCenter {

  background:#FFFFFF;
 /* border-radius: 5px;*/
  padding: 0px;
  font-size:14px;

  
}



.gwt-DialogBox .contentTable td {
	
}

.gwt-DialogBox .buttonPanel td {
	
 background:#FFFFFF;	
}

.gwt-DialogBox .smallPadding td {
	padding: 0px;
	background:#FFFFFF;
}

.buttonPanel{
padding-left:80px;
background:#FFFFFF;
}

.buttonPanel1{
padding-left:20px;
background:#FFFFFF;
}


.popup{
	width: 100%;
	max-width: 450px;
	border-radius:5px;
	background:#F7F7F7;
	box-shadow: 0px 3px 14px -2px gray;
}


.accountColumnPanel{
	width: 100%;
	max-width: 220px;
}

.accontType{
	font-weigth:bold;
	font-size:17px;
}

/*
 * Distributors installations
 *
 */
 
.topOddRow {
 	background-color: #DFE7FD !important;
 }
 
 .topOddRow td {
	border: 2px solid #DFE7FD !important;
}
 
 .topEvenRow {
 	background-color: #D5DDF5 !important; 
 }
 
 .topEvenRow td {
 	border: 2px solid #D5DDF5 !important; 
 }

.multipleDistributorsWarning {
	max-width: 1200px;
	margin: 0 auto;
}

.multipleDistributorsWarning .warningTableEvenBg {
	background-color: #FEF7FD;
}

.multipleDistributorsWarning .warningTableOddBg {
	background-color: #e3e7eb;
}

.multipleDistributorsWarning .innerCell {
	border-bottom: 1px solid lightgray;
}

.multipleDistributorsWarning .header {
	background-color: #D5DDF5;
	font-weight: bold;
}
/*
 *
 * Common use
 *
 */
 
 .leftAlign150 {
 margin-left:150px;
 }
 
  .leftAlign20 {
 margin-left:20px;
 }

.infoHeader {
font-weight: bold;
padding-left: 10px;
padding-top:6px;
margin-left:-2px;
width: 100%;
height: 30px;
border-bottom: 1px solid #D7D7D7;
box-shadow: 0px 3px 14px -2px gray;
color: #4A4A4A;
background: #fdfdfd;
background: -moz-linear-gradient(top, #fdfdfd 0%, #e1e1e1 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fdfdfd), color-stop(100%,#e1e1e1));
background: -webkit-linear-gradient(top, #fdfdfd 0%,#e1e1e1 100%);
background: -o-linear-gradient(top, #fdfdfd 0%,#e1e1e1 100%);
background: -ms-linear-gradient(top, #fdfdfd 0%,#e1e1e1 100%);
background: linear-gradient(to bottom, #fdfdfd 0%,#e1e1e1 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fdfdfd', endColorstr='#e1e1e1',GradientType=0 );


	
/*	box-sizing: border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;*/
}



/*
 *
 * Top menu
 *
 */

.topMenu {
	background: #7db9e8; /* Old browsers */
	background: -moz-linear-gradient(top, #7db9e8 0%, #207cca 52%, #00a8e5 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7db9e8), color-stop(52%,#207cca), color-stop(100%,#00a8e5)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #7db9e8 0%,#207cca 52%,#00a8e5 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #7db9e8 0%,#207cca 52%,#00a8e5 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #7db9e8 0%,#207cca 52%,#00a8e5 100%); /* IE10+ */
	background: linear-gradient(top, #7db9e8 0%,#207cca 52%,#00a8e5 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7db9e8', endColorstr='#00a8e5',GradientType=0 ); /* IE6-9 */
}

.topMenu .userPanel {
	color: white;
}

.topMenu .button img {
	padding-right: 5px;
}

.topMenu .button {
	font-weight: bold;
	height: 30px;
	padding: 5px 5px 0 5px;
}

.topMenu .enabledButton {
	color: white;
	cursor: pointer;
}

.topMenu .enabledButton:active {
	background: #DEEBFA;
	color: #20293A;
}

.topMenu .enabledButton:hover {
	background: #93C3FA;
}

.topMenu .selectedButton {
	background: #b6c0c4; /* Old browsers */
	background: -moz-linear-gradient(top, #b6c0c4 0%, #c4c8d3 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b6c0c4), color-stop(100%,#c4c8d3)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #b6c0c4 0%,#c4c8d3 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #b6c0c4 0%,#c4c8d3 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #b6c0c4 0%,#c4c8d3 100%); /* IE10+ */
	background: linear-gradient(top, #b6c0c4 0%,#c4c8d3 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b6c0c4', endColorstr='#c4c8d3',GradientType=0 ); /* IE6-9 */
}

.topMenu .logoutLabel {
	padding: 3px 5px;
	margin-left: 15px;
	font-weight: bold;
	background-color: #207cca;
	cursor: pointer;
}

.topMenu .logoutLabel img {
	vertical-align: middle;
}

.topMenu .logoutLabel:HOVER {
	background-color:  #297289;
}

.SystemSummary
{
	width: 100%;
display: block;
float: left;
font-size: 8pt;
color: #1A1A1A;
border: 1px solid #E5E5E5;
}

.flatSystemSummary
{
width: 100%;
max-width: 1200px;
margin: 0 auto;
display: block;
font-size: 12px;
color: #1A1A1A;

}

.detailsTable
{
font-size: 10pt;
color: #1A1A1A;
border-left: 1px solid #E5E5E5;
border-top: 1px solid #E5E5E5;
margin-left:10px;
margin-right:10px;
margin-bottom:10px;
}

.flatdetailsTable
{
font-size: 13px;
color: #1A1A1A;
margin-left:10px;
margin-right:10px;
margin-bottom:10px;
}

.insuranceDetailsTable
{
font-size: 11pt;
color: #1A1A1A;
border-left: 1px solid #E5E5E5;
border-top: 1px solid #E5E5E5;
margin-left:15px;
margin-right:10px;
margin-bottom:10px;
}

.detailsTableHeader {

height: 26px;
font-weight: bold;
border-bottom: 1px solid #D7D7D7;
color: #4A4A4A; 
/*box-shadow: 0px 3px 14px -2px rgb(189, 189, 189);*/
background: #f0f0f0;
background: -moz-linear-gradient(top, #fdfdfd 0%, #e1e1e1 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fdfdfd), color-stop(100%,#e1e1e1));
background: -webkit-linear-gradient(top, #fdfdfd 0%,#e1e1e1 100%);
background: -o-linear-gradient(top, #fdfdfd 0%,#e1e1e1 100%);
background: -ms-linear-gradient(top, #fdfdfd 0%,#e1e1e1 100%);
background: linear-gradient(to bottom, #fdfdfd 0%,#e1e1e1 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fdfdfd', endColorstr='#e1e1e1');
}


.stretchDetailsTable {
	table-layout: fixed;
}

.flatDetailsTableHeader {

font-size: 15px;
height: auto;
min-height: 26px;
font-weight: bold;
border-bottom: 2px solid #6F7277;
color: #4A4A4A;
padding-left: 14px;
white-space: normal;
word-wrap: break-word;
overflow-wrap: break-word;
overflow: hidden;

}

.flatEmptyDetailsTableHeader {
	
font-size: 12px;
height: 26px;
font-weight: normal;
border-top: 2px solid #6F7277;
color: #4A4A4A;
/*padding-left:5px;*/
}

.flatDetailsTableRow
{
	font-size: 13px;
}

.detailsTableRow
{
	border-bottom: 1px solid #E5E5E5;
}

.detailsTableCell{
height: 100%;
border-right: 1px solid #E5E5E5;
border-bottom: 1px solid #E5E5E5;
padding:4px;

}

.flatDetailsTableCell{
height: 100%;
padding:5px;
font-size: 13px;
padding-left:15px;
}

.systemSummary .row td {
	padding-bottom: 0px;
	padding-top: 0px;
	height: 23px;
}

.gwt-DisclosurePanel .content {
    margin-left: 0px !important;
    padding: 0px 0 4px 0px !important;
}

.AdminDetailsTable
{
font-size: 14px;
color: #1A1A1A;
border-top: 2px solid #E5E5E5;
border-bottom: 2px solid #E5E5E5;
margin-left:10px;
margin-right:10px;
margin-bottom:10px;
}

.AdminDetailsTable1Header {
	
font-size: 17px;
height: 26px;
font-weight: bold;
color: #4A4A4A; 
padding-left: 14px;

}

.MCDetailsTableRow
{
border-bottom: 1px solid #E5E5E5;
}

.MCTableHeader {
font-size: 15px;
font-weight: bold;
color: #4A4A4A; 
}

.AdminDetailsTable2Header {
	
font-size: 15px;
height: 26px;
font-weight: bold;
color: #4A4A4A; 
padding-left: 14px;

}

.AdminDetailsTableCell{
height: 30px;
padding:5px;
font-size: 14px;
padding-left:15px;
}

.AdminDetailsTableCellOdd,
.AdminDetailsTable td.AdminDetailsTableCellOdd{
background-color: #E9E9E9;
}

.AdminDetailsTableCellWithTopBorder{
height: 30px;
padding:5px;
font-size: 14px;
padding-left:15px;
border-top: 2px solid #E5E5E5;
}

.AdminDetailsTableRowSelected
{
	border:0px;
  	background:#ECECEC;/*#EEA638;/*#DF7F18;/*#f3f7fb; /*#628cd5; */
  	color: #20293A;
  	font-weight: bold;  
  	height: auto;
  	overflow: auto;
  	font-size: 14px;
	
}

.AdminDetailsTableRow
{
	border-bottom: 1px solid #E5E5E5;
	font-size: 14px;
}

.systemDetailsHeader td {
height: 43px;
}


.flexTable {
	table-layout: fixed;
}

.flexTable td {
	overflow: hidden;
	white-space: normal;
	word-wrap: break-word;
}

.letItBeGray, td.letItBeGray {
	background-color : #D0E4F6;
	height: 16px;
	padding: 2px 0px 0px 0px;
    border-bottom: 1px solid #C0C0C0;
    border-left: 1px solid #D0E4F6;
    border-top: 1px solid #D0E4F6;
    border-right: 1px solid #D0E4F6; 
	/*border: solid #D0E4F6;*/
}

.box {
        position: absolute;
        background-color: red;
        height: 100%;       width: 100%;  max-width: 400px;  /* Using "px" here, but you */
                                            /* can also use "em" etc.   */
        top: 0%;            left: 50%;
        margin-top: 0px;  margin-left: -200px;
    }
    
    
    
    
    
    
    /* 
* Global widget style. 
*/
.gwt-DatePicker {
  border: 1px solid #f1f1f1;
  border-bottom: 2px solid #f1f1f1;
  color: 6b6b6b;
  cursor: default;
  border-radius:5px;
}

.datePickerDay,.datePickerWeekdayLabel,.datePickerWeekendLabel {
  padding: 4px;
  text-align: center;
  outline: none;
  cursor: default;
  font-size:13px;
}

.gwt-DatePicker td,.datePickerMonthSelector  td :focus {
  outline: none
}

.gwt-DateBox input {
  width: 8em;
}

/* 
* Calendar styles 
*/
.datePickerDays {
  background-color: white;
  width: 100%;
}

.datePickerWeekdayLabel {
  background: #F6F6F6;
}

.datePickerWeekendLabel {
  background: #dbe7ef;
}

.datePickerDay {
  padding: 2px;
  cursor: hand;
  width: 1em;
}

.datePickerDayIsToday {
  border: 1px solid black;
  padding: 0px;
}

.datePickerDayIsWeekend {
  background: #f1f1f1;
}

.datePickerDayIsFiller {
  color: #bfbfbf;
  padding: 1px;
  cursor: hand;
}

.datePickerDayIsSelected {
  background: #aaccee;
}

.datePickerDayIsDisabled {
  color: graytext;
}

.datePickerDayIsHighlighted {
  border: 1px solid #eeeeee;
  padding: 0px;
}

.datePickerDayIsSelectedAndHighlighted {
   background: #bbddff;
}


/* 
* Month selector styles 
*/
.datePickerMonthSelector {
  background: #F1F1F1;
  width: 100%;
  text-align: center;
}

.datePickerMonth {
  text-align: center;
  vertical-align: center;
  white-space: nowrap;
  font-weight: bold;

}

.datePickerPreviousButton {
   text-align: left;
}

.datePickerNextButton {
     text-align: right; 
}

.selectedPictureShadow{
	
border-bottom: 1px solid #D7D7D7;
box-shadow: 0px 3px 14px -2px gray;
color: #4A4A4A;
background: #fdfdfd;
background: -moz-linear-gradient(top, #fdfdfd 0%, #e1e1e1 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fdfdfd), color-stop(100%,#e1e1e1));
background: -webkit-linear-gradient(top, #fdfdfd 0%,#e1e1e1 100%);
background: -o-linear-gradient(top, #fdfdfd 0%,#e1e1e1 100%);
background: -ms-linear-gradient(top, #fdfdfd 0%,#e1e1e1 100%);
background: linear-gradient(to bottom, #fdfdfd 0%,#e1e1e1 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fdfdfd', endColorstr='#e1e1e1',GradientType=0 );
}

.backgrounBlack  {
	background-color: black;
}

.wizTableStyle{
/*	padding:8px;*/
	border: 1px solid #C9C9C9;
	box-sizing: border-box;
	position: absolute !important;
	margin:	8px;
/*	width: 100%;
	height: 100%;*/
	white-space: nowrap;
}

.wizTableZeroLeftMargin{
	margin-left: 0px;
}
.wizTableZeroRightMargin{
	margin-right: 0px;
}
.popupGlassStyle{
	width: 100%;
	height: 100%;	
	background-color: #000;
	opacity: 0.45;
	mozOpacity: 0.45;
	filter: alpha(opacity=45);
}

.wizMainList{	
	box-sizing: border-box;
	border-color: rgb(173, 173, 173);
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
	border-style: solid solid solid none;
	border-width: thin;
	background-color: #404040;
  	background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(202, 202, 202)), to(rgb(229, 229, 229))); /* Chrome, Safari 4+ */
  	background-image: -webkit-linear-gradient(top, rgb(202, 202, 202), rgb(229, 229, 229)); /* Chrome 10-25, iOS 5+, Safari 5.1+ */
  	background-image:    -moz-linear-gradient(top, rgb(202, 202, 202), rgb(229, 229, 229)); /* Firefox 3.6-15 */
  	background-image:      -o-linear-gradient(top, rgb(202, 202, 202), rgb(229, 229, 229)); /* Opera 11.10-12.00 */
  	background-image:         linear-gradient(to bottom, rgb(202, 202, 202), rgb(229, 229, 229)); 
	background-image: linear-gradient(rgb(202, 202, 202) 0%, rgb(229, 229, 229) 100%);
}

.wizWidgetDisabled{
	color: lightgray;
	border-color: lighthray;
}

.dataGridHeaderStyle{
	overflow: hidden;
}

.balloonPanel {
    padding:5px;
    border:solid;
    border-width:2px;
    border-color:rgb(200,210,240);
    border-radius: 15px;
    -moz-border-radius: 15px;
    opacity: 0.0;
    background-color:rgb(220,230,254);
    color:#20293A;

    background: -webkit-gradient(linear, left top, left bottom, from(rgb(225,240,254)), to(rgb(200,220,244)));
    background: -moz-linear-gradient(top,  rgb(244, 244, 254),  rgb(230, 230, 245));
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='rgb(225,240,254)', endColorstr='rgb(200,220,244)');
}

.wizButton {
	margin-top: 5px;
	margin-bottom: 5px;
	margin-right: 5px;
	margin-left: 5px;
	height: 30px;
	
	cursor: pointer;
	/*width: 150px;*/
	border-top: 1px solid #F4F4F4;
	text-align: center;
	border-radius: 5px;
	border: 1px solid #CBCBCB;
	box-shadow: inset 0 -8px 10px rgba(0,0,0,0.15), 0 1px 0 rgba(255,255,255, 0.3), inset 0 1px 0 rgba(255,255,255, 0.3);
	background: rgb(229,229,229);
}

.wizRadioButton {
	margin: 8px;
	cursor: pointer;
}

.wizRadioButtonPanel{
	margin-top:	10px;
	margin-left: 15px;
}

.wizPgmWiringCaption{
	margin-bottom: 10px;
	font-size: 17px;
}

.wizTopPanelHeader{
	font-weight: bold;
	font-size: 15px;
	/*padding-left:10px;
	padding-top:10px;*/
	margin:7px;
	width: 100%;
	height: 41px;
	border-bottom: 1px solid #D7D7D7;
	box-shadow: 0px 3px 14px -2px gray;
	color: #4A4A4A;
	background: #fdfdfd;
	background: -moz-linear-gradient(top, #fdfdfd 0%, #e1e1e1 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fdfdfd), color-stop(100%,#e1e1e1));
	background: -webkit-linear-gradient(top, #fdfdfd 0%,#e1e1e1 100%);
	background: -o-linear-gradient(top, #fdfdfd 0%,#e1e1e1 100%);
	background: -ms-linear-gradient(top, #fdfdfd 0%,#e1e1e1 100%);
	background: linear-gradient(to bottom, #fdfdfd 0%,#e1e1e1 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fdfdfd', endColorstr='#e1e1e1',GradientType=0 );
}

.wizSpanFix {
	display: inline-block;
   	width: 100%;
}

.wizMainScrollBox{
	margin-left: 10px;
}

.wizLoopTypeHelpPanel{
	margin: 10px;
}

.wizLoopTypeHelpText{
	font-weight: bold;
	margin-bottom: 5px;
}

.wizVerticalLabel{
	
}
.wizFilterCheckAllPanel{
	margin: 10px;
}
.wizFilterCheckAllItem{
	font-weight: bold;
}
.wizFilterItem{
	margin: 1px;
	margin-left: 10px;
}
.wizMainGrid{
	margin-left: 10px;
	margin-bottom:	10px;
}
.wizRepChannel{
    border-style: solid;
    border-width: 1px;
    border-color: silver;
    margin-left: 10px;
    margin-bottom:	10px;
}
.wizGridFirstItem{
	padding: 5px;
	width: 215px;
	text-align: right;
	vertical-align: middle;
}
.wizGridItem{
	width: 215px;
	vertical-align: middle;
}
.boxShadow {
	box-shadow:0px 0px 20px #E2E2E2;
}

/* "Ripples" decorative motif (brand guide sec.5) behind the login screen only.
   This is a GWT VerticalPanel (table>tbody>tr>td) - browsers keep anonymous
   table boxes for tr/td even with display:contents, so flex won't reach
   inside it. Stick to table layout: make the table full-height, and let the
   row holding .loginCenterPanel stretch + vertical-center its cell. */
.loginRipplesBackground {
	width: 100%;
	height: 100vh;
	box-sizing: border-box;
	background-color: #EFF5FD;
	background-image: repeating-linear-gradient(-45deg, rgba(0,26,119,0.05) 0px, rgba(0,26,119,0.05) 2px, transparent 2px, transparent 40px);
}

.loginRipplesBackground > tbody > tr > td {
	text-align: center;
}

.loginRipplesBackground > tbody > tr:has(> td > .loginCenterPanel) {
	height: 100%;
}

.loginRipplesBackground > tbody > tr:has(> td > .loginCenterPanel) > td {
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.loginTopToolbar {
	width: 100%;
	background-color: #001A77;
	padding: 24px 40px;
	box-sizing: border-box;
	text-align: left;
}

.loginCenterPanel {
	width: 100%;
	max-width: 390px;
	margin: 0 auto;
}

/* Registration forms (create-account) carry more fields per row than the
   login card, so they get a wider shell instead of the login card's 390px. */
.registerCenterPanel {
	max-width: 480px;
}

.contentTable {
	width: 100%;
	background: #FFFFFF;
	padding: 10px 20px 20px 20px;
	box-sizing: border-box;
	font-size: 13px;
}

.contentTable td {
	padding: 4px 4px 4px 0;
	vertical-align: middle;
}

.contentTable .gwt-TextBox,
.contentTable .gwt-SuggestBox {
	width: 100%;
	box-sizing: border-box;
	float: none;
}

.contentTable img {
	vertical-align: middle;
	margin-left: 4px;
}

.contentTable .errorLabel {
	font-size: 12px;
	padding-left: 6px;
}

/*
 * GWT DataGrid, variant "dg-gwt": GWT's stock DataGrid.css (gwt-user 2.9.0,
 * com/google/gwt/user/cellview/client/DataGrid.css). Used by admin Module catalog and User lookup.
 *
 * The same rules are also the BASE of the other variants (dg-custom, dg-flat, dg-frozen):
 * GWT builds each of those as @Source({DataGrid.Style.DEFAULT_CSS, "<override>.css"}), i.e. this
 * file cascaded under the override file. So this file must load before datagrid-custom.css,
 * datagrid-flat.css and datagrid-frozen.css (src/styles/index.css keeps that order), and every
 * override only replaces the properties it names; the rest keeps coming from here.
 *
 * Name mapping: GWT CssResource obfuscated the class names at runtime (GGQJEJB*). The stable
 * names are the CssResource method names, unchanged, as descendants of the variant class that
 * sits on the grid root element (the GWT "dataGridWidget" element):
 *
 *   <div class="dg-gwt">                          dataGridWidget  -> the .dg-* root itself
 *     header cell  th.dataGridHeader  (+ dataGridFirstColumnHeader / dataGridLastColumnHeader,
 *                                        dataGridSortableHeader, dataGridSortedHeaderAscending|Descending)
 *     footer cell  td.dataGridFooter  (+ dataGridFirstColumnFooter / dataGridLastColumnFooter)
 *     body row     tr.dataGridEvenRow | dataGridOddRow, plus dataGridHoveredRow,
 *                  dataGridKeyboardSelectedRow, dataGridSelectedRow
 *     body cell    td.dataGridCell + dataGridEvenRowCell | dataGridOddRowCell, plus
 *                  dataGridHoveredRowCell, dataGridKeyboardSelectedRowCell,
 *                  dataGridSelectedRowCell, dataGridKeyboardSelectedCell
 *                  (+ dataGridFirstColumn / dataGridLastColumn)
 *
 * Classes with no declaration anywhere (hooks only): dataGridFirstColumn, dataGridLastColumn,
 * dataGridFirstColumnHeader, dataGridLastColumnHeader, dataGridFirstColumnFooter,
 * dataGridLastColumnFooter, dataGridSortedHeaderAscending|Descending (dg-gwt).
 *
 * GWT's `selectionBorderWidth` constant is inlined as 2px. Dropped: `cursor: hand`
 * (invalid, the preceding `pointer` always won).
 * Sort arrow images (<img>, not CSS): /images/sortAscending.png, /images/sortDescending.png (11x7);
 * loading indicator: /images/cellTableLoading.gif.
 */

:is(.dg-gwt, .dg-custom, .dg-flat, .dg-frozen) .dataGridFooter {
  border-top: 2px solid #6f7277;
  padding: 3px 15px;
  text-align: left;
  color: #4b4a4a;
  text-shadow: #ddf 1px 1px 0;
  overflow: hidden;
  white-space: nowrap;
}

:is(.dg-gwt, .dg-custom, .dg-flat, .dg-frozen) .dataGridHeader {
  border-bottom: 2px solid #6f7277;
  padding: 3px 15px;
  text-align: left;
  color: #4b4a4a;
  text-shadow: #ddf 1px 1px 0;
  overflow: hidden;
  white-space: nowrap;
}

:is(.dg-gwt, .dg-custom, .dg-flat, .dg-frozen) .dataGridCell {
  padding: 2px 15px;
  overflow: hidden;
}

:is(.dg-gwt, .dg-custom, .dg-flat, .dg-frozen) .dataGridSortableHeader {
  cursor: pointer;
}

:is(.dg-gwt, .dg-custom, .dg-flat, .dg-frozen) .dataGridSortableHeader:hover {
  color: #6c6b6b;
}

:is(.dg-gwt, .dg-custom, .dg-flat, .dg-frozen) .dataGridEvenRow {
  background: #ffffff;
}

:is(.dg-gwt, .dg-custom, .dg-flat, .dg-frozen) .dataGridEvenRowCell {
  border: 2px solid #ffffff;
}

:is(.dg-gwt, .dg-custom, .dg-flat, .dg-frozen) .dataGridOddRow {
  background: #f3f7fb;
}

:is(.dg-gwt, .dg-custom, .dg-flat, .dg-frozen) .dataGridOddRowCell {
  border: 2px solid #f3f7fb;
}

:is(.dg-gwt, .dg-custom, .dg-flat, .dg-frozen) .dataGridHoveredRow {
  background: #eee;
}

:is(.dg-gwt, .dg-custom, .dg-flat, .dg-frozen) .dataGridHoveredRowCell {
  border: 2px solid #eee;
}

:is(.dg-gwt, .dg-custom, .dg-flat, .dg-frozen) .dataGridKeyboardSelectedRow {
  background: #ffc;
}

:is(.dg-gwt, .dg-custom, .dg-flat, .dg-frozen) .dataGridKeyboardSelectedRowCell {
  border: 2px solid #ffc;
}

:is(.dg-gwt, .dg-custom, .dg-flat, .dg-frozen) .dataGridSelectedRow {
  background: #628cd5;
  color: white;
  height: auto;
  overflow: auto;
}

:is(.dg-gwt, .dg-custom, .dg-flat, .dg-frozen) .dataGridSelectedRowCell {
  border: 2px solid #628cd5;
}

/* The keyboard selected cell is visible over selection. */
:is(.dg-gwt, .dg-custom, .dg-flat, .dg-frozen) .dataGridKeyboardSelectedCell {
  border: 2px solid #d7dde8;
}
/*
 * GWT DataGrid, variant "dg-custom": customDataGrid.css cascaded over the default DataGrid.css
 * (CustomDataGridResources, @Source({DataGrid.Style.DEFAULT_CSS, "customDataGrid.css"})).
 * Base rules live in datagrid-gwt.css (loads first); this file only holds the overrides.
 * Used by: admin Messages list, good/common/systemlist/SystemListViewImpl (dead).
 * wizzardCustomDataGrid.css (distributor PaymentListView, unreachable) is this file with a typo
 * (`overflow: hiden` on the header, ignored by browsers so the default `hidden` stays); not ported separately.
 *
 * Name mapping and DOM: see datagrid-gwt.css. Class names are the CssResource method names
 * as descendants of .dg-custom. dataGridWidget -> .dg-custom (the root itself).
 * Look: 1px #e1e1e1 frame, 36px gradient header (14px bold, centred), 34px cells with 10pt text,
 * zebra #fff / #f7f7f7, selected #e2e2e2 bold. The sort arrow is hidden and the sorted
 * header is underlined instead. Hover (#eee) and keyboard-selected (#ffc) backgrounds still come
 * from the base (the override file only commented them out).
 * Dropped as no-ops: IE/-moz/-webkit/-o gradient fallbacks, `filter: "progid..."`, `cursor: hand`.
 */

.dg-custom {
  border: 1px solid #e1e1e1;
  border-bottom: 1px solid #f7f7f7;
  cursor: default;
}

.dg-custom .dataGridFooter {
  border-top: 2px solid #6f7277;
  padding: 5px 4px;
  text-align: left;
  color: #4b4a4a;
  white-space: nowrap;
  cursor: default;
}

.dg-custom .dataGridHeader {
  color: #4a4a4a;
  font-weight: bold;
  text-align: center;
  overflow: visible;
  padding: 0px;
  height: 36px;
  font-size: 14px;
  border-bottom: 1px solid #c9c9c9;
  background: linear-gradient(to bottom, #fdfdfd 0%, #e1e1e1 100%);
}

.dg-custom .dataGridCell {
  padding: 0px 0px 2px 6px;
  overflow: hidden;
  height: 34px;
  border-bottom: 1px hidden #f7f7f7;
  border-top: 1px hidden #f7f7f7;
  border-left: 1px solid #f1f1f1;
  border-right: 1px solid #c9c9c9;
  font-size: 10pt;
  color: #4a4a4a;
  cursor: default;
}

/* hack to remove sort icon: underline the sorted header instead */
.dg-custom .dataGridSortedHeaderAscending div:first-child img,
.dg-custom .dataGridSortedHeaderDescending div:first-child img {
  visibility: hidden;
}

.dg-custom .dataGridSortedHeaderAscending div:first-child,
.dg-custom .dataGridSortedHeaderDescending div:first-child {
  padding-left: 0px !important;
  text-decoration: underline;
}

.dg-custom .dataGridEvenRow {
  background: #ffffff;
}

.dg-custom .dataGridEvenRowCell {
  font-size: 10pt;
  color: #4a4a4a;
}

.dg-custom .dataGridOddRow {
  background-color: #f7f7f7;
}

.dg-custom .dataGridOddRowCell {
  font-size: 10pt;
  color: #4a4a4a;
}

.dg-custom .dataGridKeyboardSelectedRow {
  border-bottom: 1px #f7f7f7;
  border-top: 1px #f7f7f7;
  border-left: 1px solid #f1f1f1;
  border-right: 1px solid #c9c9c9;
  height: 32px;
}

.dg-custom .dataGridKeyboardSelectedRowCell {
  border-bottom: 1px #e2e2e2;
  border-top: 1px #e2e2e2;
  border-left: 1px solid #f1f1f1;
  border-right: 1px solid #c9c9c9;
}

.dg-custom .dataGridSelectedRow {
  background: #e2e2e2;
  color: #20293a;
  font-weight: bold;
  height: auto;
  overflow: auto;
  border-bottom: 1px hidden #f7f7f7;
  border-top: 1px hidden #f7f7f7;
  border-left: 1px solid #f1f1f1;
  border-right: 1px solid #c9c9c9;
}

.dg-custom .dataGridSelectedRowCell,
.dg-custom .dataGridKeyboardSelectedCell {
  border-bottom: 1px hidden #f7f7f7;
  border-top: 1px hidden #f7f7f7;
  border-left: 1px solid #f1f1f1;
  border-right: 1px solid #c9c9c9;
}

/*
 * GWT DataGrid, variant "dg-flat": newCustomDataGrid.css cascaded over the default DataGrid.css
 * (NewCustomDataGridResources). Base rules live in datagrid-gwt.css (loads first); this file only
 * holds the overrides.
 * Used by: NewSystemListViewImpl (main system list of enduser/installer/corporate),
 * distributor InstallationsListViewImpl, ConfirmVoucherListView.
 *
 * Name mapping and DOM: see datagrid-gwt.css. Class names are the CssResource method names
 * as descendants of .dg-flat. dataGridWidget -> .dg-flat (the root itself).
 * Look: white, no cell borders, 34px header (14px bold #4a4a4a, left), 23px cells with 10pt text,
 * selected #ececec bold. The 2px #6f7277 header underline and the footer top border are NOT
 * overridden, so they still come from the base (visible in the GWT distributor list). The sort
 * arrow is hidden and the sorted header is underlined instead.
 * Dropped as no-ops: `bacground` typo, `text-shadow: 0px` (invalid), `cursor: hand`.
 */

.dg-flat {
  border: 0px;
  overflow-x: hidden;
}

.dg-flat table {
  width: 100%;
}

.dg-flat .dataGridFooter {
  padding: 5px 4px;
  text-align: left;
  color: #4b4a4a;
  white-space: nowrap;
  cursor: default;
}

.dg-flat .dataGridHeader {
  background: #ffffff;
  color: #4a4a4a;
  font-weight: bold;
  text-shadow: 0px 0px 0px rgb(221, 221, 255);
  overflow: visible;
  height: 34px;
  padding: 0px;
  font-size: 14px;
}

.dg-flat .dataGridCell {
  padding: 0px 0px 1px 0px;
  overflow: hidden;
  height: 23px;
  font-size: 10pt;
  color: #4a4a4a;
  cursor: default;
  border: 0px;
}

/* hack to remove sort icon: underline the sorted header instead */
.dg-flat .dataGridSortedHeaderAscending div:first-child img,
.dg-flat .dataGridSortedHeaderDescending div:first-child img {
  visibility: hidden;
}

.dg-flat .dataGridSortedHeaderAscending div:first-child,
.dg-flat .dataGridSortedHeaderDescending div:first-child {
  padding-left: 0px !important;
  text-decoration: underline;
}

.dg-flat .dataGridEvenRow,
.dg-flat .dataGridOddRow {
  background: #ffffff;
}

.dg-flat .dataGridSelectedRow {
  border: 0px;
  background: #ececec;
  color: #20293a;
  font-weight: bold;
  height: auto;
  overflow: auto;
}

/*
 * GWT DataGrid, variant "dg-frozen": widgets/frozenpanestable/DataGridOverride.css cascaded over the
 * default DataGrid.css (FreezePanesTable). Base rules live in datagrid-gwt.css (loads first).
 * Only user: admin installations/InstallationsListViewImpl, which is unreachable (low priority,
 * kept for completeness).
 *
 * Name mapping and DOM: see datagrid-gwt.css. Class names are the CssResource method names
 * as descendants of .dg-frozen.
 * Look: 40px gradient header (12px bold, wraps, centred), 34px cells (13px), zebra #fff / #f7f7f7,
 * sort arrow hidden and sorted header underlined.
 * Dropped as no-ops: IE/-moz/-webkit/-o gradient fallbacks, `filter: "progid..."`, `cursor: hand`.
 */

.dg-frozen .dataGridHeader {
  color: #4a4a4a;
  font-weight: bold;
  text-align: center;
  overflow: visible;
  padding: 0px;
  height: 40px;
  white-space: normal;
  font-size: 12px;
  border-bottom: 1px solid #c9c9c9;
  background: linear-gradient(to bottom, #fdfdfd 0%, #e1e1e1 100%);
}

.dg-frozen .dataGridCell {
  padding: 0px 0px 2px 6px;
  overflow: hidden;
  height: 34px;
  border-bottom: 1px hidden #f7f7f7;
  border-top: 1px hidden #f7f7f7;
  border-left: 1px solid #f1f1f1;
  border-right: 1px solid #c9c9c9;
  font-size: 13px;
  color: #4a4a4a;
}

.dg-frozen .dataGridEvenRow {
  background: #ffffff;
}

.dg-frozen .dataGridEvenRowCell {
  font-size: 10pt;
  color: #4a4a4a;
}

.dg-frozen .dataGridOddRow {
  background-color: #f7f7f7;
}

.dg-frozen .dataGridOddRowCell {
  font-size: 10pt;
  color: #4a4a4a;
}

/* hack to remove sort icon: underline the sorted header instead */
.dg-frozen .dataGridSortedHeaderAscending div:first-child img,
.dg-frozen .dataGridSortedHeaderDescending div:first-child img {
  visibility: hidden;
}

.dg-frozen .dataGridSortedHeaderAscending div:first-child,
.dg-frozen .dataGridSortedHeaderDescending div:first-child {
  padding-left: 0px !important;
  text-decoration: underline;
}

/*
 * GWT SimplePager (MyPager) style: good/common/systemlist/customPager.css (CustomPagerResources,
 * used by all 7 MyPager instances). Root element carries .gwt-SimplePager.
 *
 * Name mapping (CssResource method -> stable class):
 *   pageDetails    -> .gwt-SimplePager .pageDetails        the "Showing: a - b from n" text cell
 *   button         -> .gwt-SimplePager .pagerButton        an icon cell (First/Prev/Next/Last)
 *   disabledButton -> .gwt-SimplePager .pagerButtonDisabled added on top of .pagerButton
 * `button` is renamed because AlarmServer.css has a global .button (30x30 box) that GWT's
 * obfuscated class never matched.
 * Icons (19x19 <img>): /images/{first,previous,next,last}Page.png and ...PageDisabled.png.
 * Dropped: `cursor: hand` (invalid).
 */

.gwt-SimplePager .pageDetails {
  padding: 4px 20px;
  text-align: center;
  font-size: 13px;
}

.gwt-SimplePager .pagerButton {
  padding: 4px;
  cursor: pointer;
}

.gwt-SimplePager .pagerButtonDisabled {
  cursor: default;
}

/* After the GWT CSS (index.css). Visually hidden, still read by screen readers; takes no space, so no pixel moves. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}