/* General purpose classes */


.dialogFieldButtonDIV {
  text-align:center;
  font-family:arial;
  font-size:12px;
  display: inline-block; /* Makes auto centering work */
  margin:2px;
  min-width:80px;
  padding: 1px 3px 1px 3px !important;
  height: 15px !important;
  border: 2px outset silver; 
  background:#eee;
}

.dialogFieldButtonDIV:hover {
  border: 2px inset silver; 
  background:white;
}

.clear {
  clear:both;
}

.fillSpace {
  width:100%;
  height:100%;
}


/* Busy spinner object */
@keyframes spinnerShow         { from {visibility:visible;opacity: 0.0;} to {visibility:visible;opacity: 0.5;} }
@-moz-keyframes spinnerShow    { from {visibility:visible;opacity: 0.0;} to {visibility:visible;opacity: 0.5;} }
@-webkit-keyframes spinnerShow { from {visibility:visible;opacity: 0.0;} to {visibility:visible;opacity: 0.5;} }

@keyframes spinnerHide         { 0% {visibility:visible;opacity: 0.5;} 99% {visibility:visible;opacity: 0;} 100% {opacity: 0;visibility:hidden}}
@-moz-keyframes spinnerHide    { 0% {visibility:visible;opacity: 0.5;} 99% {visibility:visible;opacity: 0;} 100% {opacity: 0;visibility:hidden} }
@-webkit-keyframes spinnerHide { 0% {visibility:visible;opacity: 0.5;} 99% {visibility:visible;opacity: 0;} 100% {opacity: 0;visibility:hidden} }



.spinnerShow, .spinnerHide {
  position: absolute;
  z-index: 1000;

  background-image: url('/nwt/img/busy.gif');
  background-color: black;
  background-position: center center;
  background-repeat:no-repeat;
  visibility:hidden;
  opacity: 0.0;
}

.spinnerShow {

  -webkit-animation: spinnerShow 0.3s;
  -moz-animation: spinnerShow 0.3s;
  animation: spinnerShow 0.3s;

  webkit-animation-delay:1s;
  -moz-animation-delay:1s;
  animation-delay:1s;

  -webkit-animation-fill-mode:forwards;
  -moz-animation-fill-mode:forwards;
  animation-fill-mode:forwards;

}

.spinnerHide {
  -webkit-animation-fill-mode:forwards;
  -webkit-animation-fill-mode:forwards;
  animation-fill-mode:forwards;

  -webkit-animation: spinnerHide 0.3s;
  -moz-animation: spinnerHide 0.3s;
  animation: spinnerHide 0.3s;
}

.spinnerHidden {
  opacity: 0;
  visibility:hidden;
}



/* Ghost toast popups */
@keyframes ghostToastShow         { from {visibility:visible;opacity: 0.0;} to {visibility:visible;opacity: 0.9;} }
@-moz-keyframes ghostToastShow    { from {visibility:visible;opacity: 0.0;} to {visibility:visible;opacity: 0.9;} }
@-webkit-keyframes ghostToastShow { from {visibility:visible;opacity: 0.0;} to {visibility:visible;opacity: 0.9;} }

@keyframes ghostToastHide         { 0% {visibility:visible;opacity: 0.9;} 99% {visibility:visible;opacity: 0;} 100% {opacity: 0;visibility:hidden}}
@-moz-keyframes ghostToastHide    { 0% {visibility:visible;opacity: 0.9;} 99% {visibility:visible;opacity: 0;} 100% {opacity: 0;visibility:hidden} }
@-webkit-keyframes ghostToastHide { 0% {visibility:visible;opacity: 0.9;} 99% {visibility:visible;opacity: 0;} 100% {opacity: 0;visibility:hidden} }

.ghostToastShow,.ghostToastHide {
 position: absolute;
  z-index: 1000;
 background-color:beige;
  border:1px solid black;
  border-radius:10px;
  padding:10px;
  box-shadow: 2px 2px 4px #222;

}

.ghostToastShow {

  -webkit-animation: ghostToastShow 0.3s;
  -moz-animation: ghostToastShow 0.3s;
  animation: ghostToastShow 0.3s;

  -webkit-animation-fill-mode:forwards;
  -moz-animation-fill-mode:forwards;
  animation-fill-mode:forwards;
}

.ghostToastHide {
  -webkit-animation: ghostToastHide 2s;
  -moz-animation: ghostToastHide 2s;
  animation: ghostToastHide 2s;

  -webkit-animation-fill-mode:forwards;
  -moz-animation-fill-mode:forwards;
  animation-fill-mode:forwards;
}

/* *********************** Popup **************************/

/* InfoBox popups */
@keyframes infoBoxShow         { from {visibility:visible;opacity: 0.0;} to {visibility:visible;opacity: 0.95;} }
@-moz-keyframes infoBoxShow    { from {visibility:visible;opacity: 0.0;} to {visibility:visible;opacity: 0.95;} }
@-webkit-keyframes infoBoxShow { from {visibility:visible;opacity: 0.0;} to {visibility:visible;opacity: 0.95;} }

@keyframes infoBoxHide         { 0% {visibility:visible;opacity: 0.95;} 99% {visibility:visible;opacity: 0;} 100% {opacity: 0;visibility:hidden}}
@-moz-keyframes infoBoxHide    { 0% {visibility:visible;opacity: 0.95;} 99% {visibility:visible;opacity: 0;} 100% {opacity: 0;visibility:hidden} }
@-webkit-keyframes infoBoxHide { 0% {visibility:visible;opacity: 0.95;} 99% {visibility:visible;opacity: 0;} 100% {opacity: 0;visibility:hidden} }

.infoBoxShow,.infoBoxHide {
 position: absolute;
  z-index: 1000;
 background-color:beige;
  border:1px solid black;
  border-radius:10px;
  padding:10px;
  text-align:center;
  box-shadow: 6px 6px 10px #222;
  font-size:11px;
}

.infoBoxShow EM,.infoBoxHide EM {
  display:block;
  min-width:85px;
  text-align:right;
  font-weight:bold;
  clear:both;
  float:left;
}
.infoBoxShow SPAN,.infoBoxHide SPAN {
  padding-left:5px;
  float:left;
}


.infoBoxShow {

  -webkit-animation: infoBoxShow 0.3s;
  -moz-animation: infoBoxShow 0.3s;
  animation: infoBoxShow 0.3s;

  -webkit-animation-fill-mode:forwards;
  -moz-animation-fill-mode:forwards;
  animation-fill-mode:forwards;
}

.infoBoxHide {
  -webkit-animation: infoBoxHide 0.3s;
  -moz-animation: infoBoxHide 0.3s;
  animation: infoBoxHide 0.3s;

  -webkit-animation-fill-mode:forwards;
  -moz-animation-fill-mode:forwards;
  animation-fill-mode:forwards;
}

/* *********************** TextEntry popup **************************/

.textEntryTitle {
 font-size:110%;
 font-weight:bold;
 text-align:left;
 padding-bottom:2px;
}

.textEntryInput {
  color:black;
}

.textEntryRow {
  clear:both;
  text-align:center;
}

.textEntryButton {
  display: inline;
  padding:2px;
  margin: 3px;
  min-width:60px;
}

/* *********************** Popup **************************/

@keyframes popupShow         { from {visibility:visible;opacity: 0.0;} to {opacity: 0.5;} }
@-moz-keyframes popupShow    { from {visibility:visible;opacity: 0.0;} to {opacity: 0.5;} }
@-webkit-keyframes popupShow { from {visibility:visible;opacity: 0.0;} to {opacity: 0.5;} }

@keyframes popupHide         { 0% {opacity: 0.5;} 99% {opacity: 0;} 100% {opacity: 0;visibility:hidden}}
@-moz-keyframes popupHide    { 0% {opacity: 0.5;} 99% {opacity: 0;} 100% {opacity: 0;visibility:hidden} }
@-webkit-keyframes popupHide { 0% {opacity: 0.5;} 99% {opacity: 0;} 100% {opacity: 0;visibility:hidden} }


.popupBox,.popupBoxHidden {

  box-shadow: 0px 0px 10px #222;
  -moz-box-shadow: 0px 0px 10px #222;

  border-radius: none !important;
  -moz-border-radius: none !important;

  box-sizing: border-box;

  display: block;
  position: absolute;
  border: 4px double #777;
  padding: 0px;
  margin: 0px;
  /*display:display;*/
  overflow:hidden;

  background-color: #2a2a2c;


  font-size: 12px;

  top:100px;
  left:100px;


  z-index: 300;

  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

  -webkit-animation: popupShow 0.2s;
  -moz-animation: popupShow 0.2s;
  animation: popupShow 0.2s;
  cursor:default;

}


.popupBoxHidden {
  -webkit-animation: popupHide 0.2s;
  -webkit-animation-fill-mode:forwards;
  -moz-animation: popupHidee 0.2s;
  -webkit-animation-fill-mode:forwards;
  animation: popupHide 0.2s;
  animation-fill-mode:forwards;
}

.popupBoxEmbedded {
  width:100%;
  height:100%;
  flex-grow: 1;
  display:flex;
  flex-direction:column;
}

.popupRoot {
  flex-grow: 1;
  width:100%;
  height:100%;
  cursor:default;
  font-family:arial;
  opacity: 0.99;
  filter: alpha(opacity=99);
  color:white;
  background-color: #3d4047;
  border:none;
  display:flex;
  flex-direction:column;
}


.popupHead,.panelHead {
  cursor: move;
  position:relative;
  background:none !important;
  padding:1px !important;
  border-bottom: 1px solid white !important;
  margin-bottom: 2px !important;
  padding-bottom: 2px !important;
  height:62px;
  flex-basis:62px;
  flex-grow:0;
  flex-shrink:0;
  display:flex;
  flex-direction:row;
  flex-wrap: nowrap;
}

.popupTitle {
  background:none !important;

  border-radius: none !important;
  -moz-border-radius: none !important;
  color:orange;
  font-family:helvetica;
  font-weight:normal;
  font-size:16px;

  line-height: 0.9em;
  padding:4px;
  padding-top:1px;
  -moz-user-select: none;
	clear:both;
}

.popupCatBox {
  margin:0px;
  display:inline-block;
}

.popupCatLogo {
  float:left;
  height:26px;
  width:26px;
}
.popupCatText,.popupDescription {
  float:left;
  margin:5px 0px 0px 6px;
  height:26px;
  color:#ccc;
  font-size:18px;
  font-style:italic;
}

.popupCatIcon {
  float:left;
  height:30px;
  width:30px;
  padding:2px 0px 0px 2px;
  color:#ccc;
  font: normal normal normal 28px/1 "Material Design Icons";
}


.popupTitleLeft {
	float:left;
  overflow:hidden;
  min-width:10px;
  white-space:nowrap;
  flex:20;
}

.popupTitleIcon {
  cursor:pointer;
  margin-left:5px;
  padding: 2px 0px 4px 0px;
  font: normal normal normal 28px/1 "Material Design Icons";
  color:white;
  float:right;
  text-align:center;
  width:18px;
  height:10px;
  border:1px outset #aaa;
  border-radius:15px;
  color:black;
  background: #aaa;
}

.popupTitleIcon:hover {
  border:1px outset silver;
  background: #ccc;
}

.popupTitleIconBox {
  flex-shrink: 0;
  flex-grow:0;
}


.popupTitleUsericon {
  margin:1px;
  padding:1px;
  background:white;
  width:16px;
  height:16px;
  display:flex;
  flex-direction:column;
  cursor:pointer;
  border: 1px silver outset;
}

.popupTitleUsericon:hover {
  border: 1px silver inset;
}


.popupButtonBox {
  flex-shrink: 0;
  flex-grow:0;

}


.popupConfirmBox {
  display:none;
}

.popupConfirmInner {
  display:relative;
  font-family:arial;
  text-align:center;
  background-color:  #4d5057;
  border-bottom: 1px solid white;
  margin-bottom: 5px;
  padding: 5px;
}

.popupConfirmInner BUTTON {
  padding: 1px 5px 1px 5px;
  margin: 2px;
}

.popupConfirmText {
  padding:4px;
  font-size:110%;
}



.popupTitleHelp {
  position:absolute;
  top:0px;
  right:21px;
  cursor:help;
  margin: 2px;
  width:16px;
  height:16px;
  background: url('/nwt/img/help.png');
}

.popupFooterBar {
  height: 24px;
  width:99%;
  margin: 0px;
  padding: 1px 0px 2px 4px;
  text-align:center;
}

.popupFooterPos {
  margin:auto;
  padding:0px;
  overflow:auto;
}

.popupFooterButton,.popupFooterButtonDefault {
  width:70px;

  font-weight:normal;
  display:block;
  float:right;
  border: 1px solid white !important;
  border-radius: 0px !important;
  background:none;
  color:white;
  clear:both;
  margin: 0px 4px 2px 0px;
  height:18px;
  text-transform:uppercase;
}


.popupFooterButtonDefault {
  border: 1px solid orange !important;
}

.popupFooterButton:hover,.popupFooterButtonDefault:hover {
  background:#555;
  border: 1px solid yellow !important;
  border-radius: 0px !important;
}

/************************** Dialog ****************************/

.iconGroupImage,.iconGroupImageSelected {
  width:18px;
  height: 18px;
  padding: 2px;
  border: 2px outset #999;
  background:silver;
  vertical-align:top;
  margin: 1px 2px 0px 2px;
}

.iconGroupImageSelected {
  border: 2px inset #999;
  background:#dfdfdf;
}


/************************** Dialog ****************************/

.dialogForm {
  overflow: scroll;
  overflow-y: auto;
  overflow-x: hidden;
  clear: both;
}


.dialogPaneTabBar {
  margin-top:5px;
}

.dialogPaneTab,.dialogPaneTabSelect {
 border: 1px solid #303030;
  border-bottom: none;
  background-color: #2a2a2c;
  height:16px;
  float:left;
  margin: 2px 2px 0px 0px;
  text-align:center;
  font-size: 13px;
  -moz-user-select: none;
  cursor: pointer;

  padding:4px 8px 1px 5px;
  color: silver;
  -moz-border-radius-bottomright: 0px;
  -moz-border-radius-bottomleft: 0px;
  -moz-border-radius-topleft:5px;
  -moz-border-radius-topright:5px;
  border-radius: 5px 5px 0px 0px;
}

.dialogPaneTabSelect {
  background-color: #3b3b3e;
  border-bottom: none;
  margin-top: 0px;
  height: 18px;
  top: 1px;
  position: relative;
  color: white;
}


.dialogPaneBox {
  clear:both;
    margin: 5px 10px 5px 10px;
  flex: 1;
}

.dialogPaneCollapseBar {
	 height:18px;
	 padding: 4px 0px 0px 5px;
	 background-color:#2b2e33;
  margin-bottom: 2px;
  color:#eee;
}

.dialogPaneCollapseLabel {
  float:left;
	font-size:12px;
}

.dialogPaneCollapseToggleShow,.dialogPaneCollapseToggleHide {
  float:right;
  padding-right:4px;
  padding-top:0px;
  font: normal normal normal 16px/1 "Material Design Icons";

}
.dialogPaneCollapseToggleShow:before {content: '\f84e';color:orange;}
.dialogPaneCollapseToggleHide:before {content: '\f84c';color:white;}


.dialogPaneCollapsor {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  max-height:0px;
  overflow:hidden;
  transition: max-height 0.2s ease-in-out;
  padding:1px;
 background-color:#2b2e33;
  color:white;
}


.dialogPaneCollapseButton {
  float:right;
  width:20px;
  height:20px;
  color:#dddddd;
  font-size:20px;
  line-height:0.8em;
  margin:0px 5px 0px 0px;
}

.dialogPaneCollapseButton:hover {
  color:#444;
}

.dialogPaneSeparator {
  height:10px;
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+Cjxzdmcgd2lkdGg9IjgwIiBoZWlnaHQ9IjgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiA8Zz4KICA8dGl0bGU+TGF5ZXIgMTwvdGl0bGU+CiAgPGVsbGlwc2UgZmlsbD0iI2M2YzZjNiIgY3g9IjUiIGN5PSI0IiByeD0iMyIgcnk9IjMiIGlkPSJzdmdfNiIvPgogIDxlbGxpcHNlIGZpbGw9IiNjNmM2YzYiIGN4PSIyMCIgY3k9IjQiIHJ4PSIzIiByeT0iMyIgaWQ9InN2Z180Ii8+CiAgPGVsbGlwc2UgZmlsbD0iI2M2YzZjNiIgY3g9IjM1IiBjeT0iNCIgcng9IjMiIHJ5PSIzIiBpZD0ic3ZnXzUiLz4KICA8ZWxsaXBzZSBmaWxsPSIjYzZjNmM2IiBjeD0iNTAiIGN5PSI0IiByeD0iMyIgcnk9IjMiIGlkPSJzdmdfNyIvPgogIDxlbGxpcHNlIGZpbGw9IiNjNmM2YzYiIGN4PSI2NSIgY3k9IjQiIHJ4PSIzIiByeT0iMyIgaWQ9InN2Z184Ii8+CiA8L2c+Cgo8L3N2Zz4=);
  background-position:center center;
  background-repeat:no-repeat;

}

.dialogNoPane {
   flex: 1;
}



/* dialog fields */
.dialogFieldRow,.dialogFieldRowFloat {
  margin:auto;
/*  width:98%;*/
  height:auto;
  padding:2px;
  overflow:auto;
  color:white;
  font-size:14px;
  padding-top:2px;
  padding-bottom:2px;

  display:flex;
  flex-grow:99;
  flex-direction: row;
  flex-wrap: nowrap;
}

.dialogFieldRowFloat {
  float:right;
  padding:0;
  margin:0;
  margin-left:15px;
  margin-right:5px;
}

.dialogFieldRowCentered {
  text-align:center;
  width:100%;
}

.dialogFieldRowFloat {
  float:right;
}

.dialogFieldUnknown {
  width:100%;
  height:22px;
  color:red;
  text-align:center;
}

.dialogFieldLabel,.dialogFieldLabelDow,.dialogFieldLabelFloat {
  fooflex-grow:1;
  flex-basis:100px;
  height:16px;
  text-align:right;
  padding-right:4px;
  padding-top:4px;
}

.dialogFieldOptional {
  width:30px;
  flex-basis:30px;
  flex-shrink:0;
  flex-grow:0;
  background-color:none;
  background-repeat: no-repeat;
  background-position: center center;
  font: normal normal normal 24px/1 "Material Design Icons";
  font-size:28px;
  /*background-image: url('/nwt/img/toggle_on.png');*/
}

.dialogFieldMDI {
  font: normal normal normal 22px/1 "Material Design Icons";
  width:22px;
  padding:2px 0px 0px 6px;
  padding:0px;
  color:#ddd;
  display:flex;
  justify-content:center;
  align-items:center;
}

.dialogFieldMDI:hover {
  color:white;
}

.dialogFieldInputMDI {
  font: normal normal normal 22px/1 "Material Design Icons";
  width:24px;
  padding:2px 0px 0px 6px;
  color:#ddd;
  display:flex;
  justify-content:center;
  align-items:center;
}

.dialogFieldPickerMDI {
  font: normal normal normal 22px/1 "Material Design Icons";
  width:26px;
  color:#ddd;
  float:left;
  line-height:0.8em
}


.dialogFieldLabelFloat {
  text-align:left;
  padding-top:1px;
}


/* container that holds all elements of a fields content editting */
.dialogFieldContainer {
  flex-grow:99;
  display:flex;
  flex-wrap:wrap;
}

.dialogFieldContainerFloat {
  flex-grow:99;
  display:block;
}



.dialogFieldSep {
  clear:both;
}

.dialogFieldColour {
  float:left;
  text-align:center;
  width:50px;
  height:22px;
  color: rgba(1.0, 1.0, 1.0, 0);
}

.dialogFieldLabelDow {
  width:27px;
  padding:3px 0px 0px 1px;
  margin:0px;
  text-align: right;
  color: yellow;
}

.dialogFieldInfo {
  width:100%;
  text-align:center;
  color:yellow;
}

.dialogFieldInput, .dialogFieldInputDow,.dialogFieldCheckbox  {
  flex-grow:1;
  flex:1;
  flex-basis:50px;
  height:16px;
  width:20px;
  padding-left:2px;
  padding-right:2px;
  line-height:1.4em;
}

.dialogFieldInputDIV {
  padding-top:2px;
}

.dialogFieldInput:read-only {
  background:#eee;
}

.dialogFieldInputDow {
  padding-left:0px;
  margin-left:2px;
}

.dialogFieldCheckbox {
  text-align:left;
  width:16px;
  flex-basis:16px;
  flex-grow:0;
  flex-shrink:0;
}

.dialogFieldInputIP {
  width:20px;
}

.dialogFieldFile {
  height:20px;
  width:200px;
  background-color:white;
  border: 2px silver inset;
  color:black;
  line-height:1;
}

input[type=file] {
  position: relative;
  -webkit-appearance: textfield;
  -webkit-box-sizing: border-box;
}

input[type=file]::-webkit-file-upload-button {
  border: none;
  margin: 0;
  padding: 0;
  -webkit-appearance: none;
  width: 0;
}

/* "x::-webkit-file-upload-button" forces the rules to only apply to browsers that support this pseudo-element */
x::-webkit-file-upload-button, input[type=file]:after {
  content: 'Browse...';
  display: inline-block;
  left: 100%;
  margin-left:3px;
  padding: 3px 8px 2px;
  position: relative;
  -webkit-appearance: button;
}

.dialogFieldTime {
  width: 20px;
  text-align:center;
}


.dialogFieldImage {
  border: 2px outset silver;
  width: 100px;
  height: 60px;
  color: rgba(1.0, 1.0, 1.0, 0);
  text-align:center;
  background-repeat: no-repeat;
  background-position: left top;
}

.dialogFieldTextarea {
  flex-grow:1;
  -webkit-user-select: text !important;
  user-select: text  !important;
}

.dialogFieldNumber {
  flex-grow:1;
  flex-basis: 60px;
  height:16px;
  width:60px;
  max-width:60px;
  text-align:right;
}


.dialogFieldMDI {
  font: normal normal normal 22px/1 "Material Design Icons";
  width:22px;
  padding:2px 0px 0px 6px;
  padding:0px;
  color:#ddd;
  display:flex;
  justify-content:center;
  align-items:center;
}

.dialogFieldMDI:hover {
  color:white;
}

.dialogFieldInputMDI {
  font: normal normal normal 22px/1 "Material Design Icons";
  width:24px;
  padding:2px 0px 0px 6px;
  color:#ddd;
  display:flex;
  justify-content:center;
  align-items:center;
}


.dialogFieldButtonMDI {
  font: normal normal normal 22px/1 "Material Design Icons";
  width:22px;
  padding:0px;
  color:#ddd;
  display:flex;
  justify-content:center;
  align-items:center;
  background: silver;
  border: 2px #666 outset;
}

.dialogFieldButtonMDI:hover {
  background: #eee;
  border: 2px #666 inset;
}

.dialogFieldSelect {
  flex-grow:1;
  /*overflow:hidden;*/
}

.dialogFieldSelectRow {
  float:left;
}

.dialogFieldSelectBottomButton {
  flex-basis:100%;
  text-align:center;
}
.dialogFieldSelectSideButton {
  display:flex;
  flex-direction:column;
  align-items: center;
  justify-content: center;
}
.dialogFieldSelectSideButton DIV {
  margin:2px;
}

.dialogFieldSelectSideRowButton {
  display:flex;
  flex-direction:row;
  align-items: center;
  justify-content: center;
}


.dialogFieldButtonLeft {
  float:left;
}

.dialogFieldButton,.dialogFieldButtonIcon,.dialogFieldButtonIconRow,.dialogFieldButtonIcon:hover,.dialogFieldButtonIconRow:hover,.dialogFieldButton:hover {
  display: inline-block; /* Makes auto centering work */
  margin:2px;
  min-width:80px;
  padding: 1px 3px 1px 3px !important;
  height: 18px !important;
}
.dialogFieldButton:hover,.dialogFieldButtonIcon:hover,.dialogFieldButtonIconRow:hover {
  background-color:beige;
}


.dialogFieldButtonIcon,.dialogFieldButtonIcon:hover,.dialogFieldButtonIconRow,.dialogFieldButtonIconRow:hover {
  min-width:25px;
  width:25px;
}
.dialogFieldButtonIconRow,.dialogFieldButtonIconRow:hover {
float:right;
flex:0;
}

.dialogFieldButtonDIV {
  text-align:center;
  font-family:arial;
  font-size:12px;

  display: inline-block; /* Makes auto centering work */
  margin:2px;
  min-width:80px;
  padding: 1px 3px 1px 3px !important;
  height: 15px !important;
  border: 2px outset silver; 
  background:#eee;
}

.dialogFieldButtonDIV:hover {
  border: 2px inset silver; 
  background:white;
}

.dialogFieldIcon {
  margin:1px 2px 1px 2px;
  padding:1px;
  background:silver;
  width:24px;
  height:24px;
  display:flex;
  flex-direction:column;
  cursor:pointer;
  border: 2px silver outset;
}

.dialogFieldIcon:hover {
  border: 2px silver inset;
  background:white;
}

.dialogFieldFilepick {
  flex-basis:18px;
  cursor:pointer;
  margin-left:3px;
  width:16px;
  height:16px;
  border: 2px outset silver;
  font-size:14px;
  background-color:silver;
  color:black;
  text-align:center;
}

.dialogFieldIframe {
  background:white;
  border:1px inset silver;
  width:100%;
}


.dialogFieldTimedot {
  font-weight: bold;
  padding: 4px 4px 0px 4px;
  text-align:center;
}

.dialogFieldTableBox {
  float:left;
}

.dialogFieldTableBoxCentered {
  margin:auto;
}

.dialogFieldTable {
  border:1px solid black;
  background-color:white;

}


.dialogFieldJogbox {
  float:left;
}

.dialogFieldJoggerUp,.dialogFieldJoggerDown {
  width:10px;
  height:8px;
  margin:2px;
}

.dialogFieldJoggerUp {
  background: url('/nwt/img/smup.gif');
}
.dialogFieldJoggerDown {
  background: url('/nwt/img/smdown.gif');
}

.dialogFieldDateButton {
  float:left;
  width:15px;
  height:13px;
  margin:2px;
  border:2px outset silver;
  background: url('/nwt/img/calendar.png');
}

.dialogFieldTimeButton {
  float:left;
  width:15px;
  height:13px;
  margin:2px;
  border:2px outset silver;
  background: url('/nwt/img/time.png');
}

.dialogHelp {
  font-family: arial;
  font-size:14px;
}





/* date picker */
#datePickerRoot {
  width: 296px;
  height: 182px;
  z-index:600;
  background: #eeeeee;
}
.datePickerRow {
  height:20px;
  width:380px;
  text-align:center;
  margin:1px;
clear:both;
}
#datePickerPrev,#datePickerNext,#datePickerHide {
  float:left;
  width:17px;
  border:2px outset silver;
  padding:1px;
  margin:2px;
  text-align:center;
  font-size:14px;
}
#datePickerPrev:hover,#datePickerNext:hover,#datePickerHide:hover {
  background-color:white;
  color:red;
}

#datePickerMonth,#datePickerYear {
  float:left;
  width:90px;
  border:2px inset silver;
  padding:2px;
  margin:2px;
  text-align:center;
  background-color:#f5f5f5;
}
.datePickerDay,.datePickerWE {
  float:left;
  width:36px;
  border-bottom:1px solid silver;
  padding:2px;
  margin:1px;
  font-size:11px;
  text-align:center;
}
.datePickerWE {color:red;}
.datePickerCell,.datePickerCellMark {
  float:left;
  width:36px;
  height:16px;
  background-color:white;
  color: black;
  padding:2px;
  margin:1px;
  font-size:13px;
  text-align:center;
}

.datePickerCell:hover {
  background-color:silver;
}

.datePickerCellMark {
  background-color:yellow;
  color:blue;
}




/*********************** GridView ********************/
/* Grid format */



.gridViewItem_grid {
  float: left;
  width:160px;
  height:140px;
  margin:10px;
  padding:7px;
  padding-bottom:3px;
  background-color:#f4f4f4;
  border: 1px solid #eee;

  border-radius: 20px;
  text-align:center;
  color: black;
  font-size:10px;
}

.gridViewItem_grid:hover {
  background-color:#ddd;
  border: 1px solid #ccc;
}

.gridViewItem_grid IMG {
  border-radius: 20px;
}

.gridViewItem_grid P {
  display:block;
}

/* Description */
.gridViewItem_list SPAN {
  display:block;
  color: #222;
}


/* List format */

.gridViewRoot_list {

}

.gridViewItem_list {

  width:100%;
  min-height:30px;
  margin:0;
  padding:6px 0px 6px 0px;
  background-color:#f4f4f4;
  border-bottom: 1px solid #333;

  text-align:center;
  color: black;
  font-size:10px;
}

.gridViewItem_list:hover {
  background-color:#ccc;
  border: 1px solid #ccc;
}

.gridViewItem_list IMG {
  width:30px;
  height:30px;
  padding:2px 6px 0px 10px;
  float:left;
}

.gridViewItem_list I {
  width:30px;
  height:30px;
  font: normal normal normal 24px/1 "Material Design Icons";
  color:#ccc;
  padding:2px 6px 0px 10px;
  float:left;
}

/* Description */
.gridViewItem_list P {
  padding-left:10px;
  display:block;
  margin:3px 0px 3px 0px;
  text-align:left;
  font-weight:bold;
  font-style:normal;

  color: black;
}

/* Description */
.gridViewItem_list SPAN {
  display:block;
  text-align:left;
  color: #222;
}





#gridViewEmpty {
  width:100%;
  height: 140px;
  color: black;
  font-size: 14px;
  text-align:center;
  padding-top:40px;
  z-index:2;
}



.gridViewAddItem {
  float: left;
  width:144px;
  height:124px;
  margin:10px;
  padding:7px;
  padding-bottom:3px;
  background:none;
  border: 8px double #bbb;
  text-align:center;
  color: black;
  font-size:10px;
}

.gridViewAddItemCross {
  height:50px;
  width:50px;
  background:none;
  margin: 70px 0px 0px 80px;
}

.gridViewExpand {
  transition: height 0.3s ease-in-out;
  height : 0px;
  width : 95%;
  overflow: hidden;
  display : none;
  text-align:right;
  font-size:12px;
  font-weight:bold;
}

.gridViewExpand .expandList {
  text-align: left;
  width:100%;
  padding-left:17px;
  line-height:1.6em;
  color : #7688FD;
}

.gridViewExpand .expandList LI:hover {
  color: orange;
}

/********************************* Menu **************************/


/* Beseen menus */
.menuRoot {
  border:1px solid #444;
  background-color: white;
  border-radius:10px;

  position:absolute;
  min-height: 20px;
  padding:0px;
  z-index:700;
  box-shadow: 3px 3px 3px #777;
  display:none;
}

.menuLine {
  width:100%;
  text-align:left;
  height:1px;
  border-bottom:1px solid silver
}

.menuRow,.menuRowInactive {
  width:100%;
  text-align:left;
  height:25px;
  padding-top:4px;
  color:black;
  margin:0px;
  cursor:pointer;
  display:flex;
  flex-direction:row;
}

.menuRowInactive {
  color:#444;
  background-color:#e0e0e0;
}

.menuRowInactive:hover {
  background-color: #111;
  color:#bbb;
}

.menuRow:hover {
  background-color: darkblue;
  color:white;
}


.menuIcon {
  flex-basis:20px;
  flex-grow:0;
  flex-shrink:0;
  width:20px;
  height:20px;
  padding: 2px;
  color:#333;
  font: normal normal normal 18px/1 "Material Design Icons";

}

.menuText {
  font-family:arial;
  flex-grow:1;
  font-size:12px;
  cursor:pointer;
  padding:4px 2px 0px 2px;
white-space: nowrap;
  overflow:hidden;
}

.menuSubmenu {
  flex-basis:16px;
  flex-grow:0;
  flex-shrink:0;
  width:16px;
  height:20px;
  margin-right:2px;
  color:#333;
  font: normal normal normal 24px/1 "Material Design Icons";
}






/*********************** picker *****************************/

.pickerListItem,.pickerListItemSelected {
  float: left;
  height:95px ;
  margin:5px ;
  padding:2px ;
  background:none ;
  border: none ;
  display:flex;
  flex-direction:column;
  align-items:center;
  justiy-contents:center;
  text-align:center;
  color: white;
  font-size:11px;

  border-radius:3px ;

  width:90px;
  overflow:hidden;
}

.pickerListItemSelected {
  border-radius:3px;
  box-shadow: 0px 0px 5px red;
  background-color:orange !important;
}


.pickerListItem IMG,.pickerListItemSelected IMG {
  cursor:pointer;
  max-width:90px;
  height:60px;
  box-shadow: 2px 2px 5px #444;
  border-radius: 2px;
  background-color:white;
  margin-bottom:4px;
  overflow:hidden;
}

.pickerListItem I,.pickerListItemSelected I {
  display:block;
  cursor:pointer;
  max-width:90px;
  font: normal normal normal 48px/1 "Material Design Icons";
  height:60px;
  margin-bottom:4px;
  overflow:hidden;
}





.pickerView {
  overflow-y:auto;
  flex-grow:1;
}

.pickerSearchRow,.pickerTabRow {
  width:100%;
  padding: 8px;
  height:28px;
  display:inline-block;
  float:left;
  clear:both;
}

.pickerTabRow {
  display:flex;
}

.pickerTabButton,.pickerTabButtonSelected {
  flex: 1;
  font-size:13px;
  font-weight:bold;
  font-family:arial;
  background-color:#666;
  border:1px solid #eee;
  color:white;
  text-align:center;
  height:18px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  margin-top:2px;
  padding-top:2px;
}

.pickerTabButtonSelected {
  background-color:silver;
  color:black;
  border:1px solid black;
  height:20px;
  margin-top:0px;
  padding-top:4px;
}

.pickerSearchInput {
  float:left;
  width:40%;
  height:16px;
  padding-left:3px;
  margin-right:5px;
}

.pickerSearchButton {
  float:left;

}


/*********************** panel *****************************/

.panelHead {
  height:20px;
  padding:5px 5px 3px 10px !important;
  flex-basis: 20px;
}


.panelView {
  overflow-y:auto;
  height: 100%;
  display: flex;
  flex-direction : column;
}

/************************** Table *****************************/



.tableRoot {
  border:1px solid black;
  background-color:white;
  overflow-x:hidden;
  overflow-y:scroll;
  display:block;
  box-sizing: border-box;
  white-space: nowrap;
  font-family:arial;
}

.tableHeading {
  height:18px;
  border-bottom:1px solid black;
  border-right:2px dotted silver;

  color:blue;
  font-weight:bold;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  margin:auto;

  background-color:#ddd;
  cursor:move;
  display:inline-block;
  position:absolute;
  overflow:hidden;
  font-size:110%;
  left:0px;
  top:0px;
}

.tableColumn {
  border-right:2px dotted silver;
  border-bottom:1px solid black;
  float:left;
  color:blue;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  cursor:col-resize;
  position:relative;
  display:inline-block;
}

.tableNothing {
  clear:both;
  width:100%;
  height:40px;
  padding-top:20px;
  text-align:center;
  display:none;
}

.tableSortImg {
  float:left;
  width:14px;
  height:14px;
  padding-top:1px;
  margin-right:-14px;
  display: inline;
}


.tableButton {
  width:100px;
}

.tableFooter {
  text-align:center;
}


.tableCell {
  height:18px;
  padding:2px 2px 0px 2px;

  text-align:center;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;

  overflow:hidden;
  border-bottom:1px dotted black;
  color:black;
  border-collapse:collapse;
  font-size:12px;
  cursor:default;

  background-color:#FFFFFF;
  /* These transitions are supposed to change the color in case I hover over the button */
  -webkit-transition: background 0.5s, height 0.4s;
    -moz-transition: background 0.5s, height 0.4s;
        transition: background 0.5s, height 0.4s;

}


/********************************* CSSEdit *******************************/
.cssEditPreviewOuter {
  border-top:2px inset silver;
  background-color:#eee;
  width:100%;
  height:100px;
  margin:0px;
  padding:25px 0px 0px 0px;
}

.cssEditPreviewInner {
  text-align:center;
  margin:auto;
  width:70%;
  height:50px;
  border:1px solid green;
  padding:20px 0px 0px 0px;
}



/********************************* TreeView *******************************/
.treeViewRoot {
  font-family: arial;
  font-size:11px;
  padding:3px;
}

.treeViewLines {
  float:left;
  margin:0px;
  padding:0px;
  width:18x;
  height:18px;
  display:table-cell;
}

.treeViewLineRoot {
  float:left;
  margin:0px;
  padding:0px;
  min-height:18px;
  height:100%;
  display:table-row;
}


.treeViewLineimg {
  margin:0px;
  padding:0px;
  display:table-cell;
  min-height:18px;
  height:18px;
  width:18px;
  background-repeat: repeat-y;
  background-position: left top;
}

.treeViewToggle {
  margin:0px;
  padding:0px;
  float:left;
}

.treeViewIcon {
  margin:0px;
  padding:0px;
  float:left;
}

.treeViewMDI {
  font-size:16px;
  margin:1px 0px;
  padding:0px;
  float:left;
}



.treeViewChildBox {
  margin:0px;
  padding:0px;
  overflow:hidden;
  -webkit-transition: height 0.2s;
	-moz-transition: height 0.2s;
	transition: height 0.2s;
}

.treeViewRow {
  margin:0px;
  padding:0px;
  height:18px;
  overflow:hidden;
}

.treeViewRowExternal {
  margin:0px;
  padding:0px;
  display:table-row;
}


.treeViewText {
  margin:0px;
  padding:0px;
  padding-left:2px;
  vertical-align:bottom;
  height:18px;
  float:left;
  padding-top:3px;
  cursor:pointer;
}

.treeViewExternal {
  margin:0px;
  padding:0px;
  /*float:left;*/
}