/** css rules for ElkoOnline */

.testBg1 {
    background: #cafbfa;
}

.testBg2 {
    background: #ffc6ff;
}

.testBg3 {
    background: #ffffbf;
}

.hpIntendation {
    margin-left: auto;
    margin-right: auto;
    width: 800px;
}

.vpIntendation {
    margin-left: auto;
    margin-right: auto;
    width: 800px;
}

.text12, .text14, .text16, .text24, .link, .textBox, .listBox, .languageListBox, .button, .textArea, .textLong, .unit,
.textRed, .textCenter, .textLeft, .textRight, .text, .text480, .textInactive, .textArea, .textLong, .textShort,
.textPrintUserdata, .textShort, .textFixed, .textProject, .textShowHeatingEngineeringResults, .textFixed, .textProject,
.textPleaseLoginSolar, .textCurrentUser, .textResultSelectionPresentation, .additionalTextResultSelectionPresentation,
.showAlsoHeatEngineeringResults, .valueResultSelectionPresentation, .textInTheMiddle, .textBox-FormatError,
.textBoxLong-FormatError, .buttonLine2a, .buttonInRow, .articleId
{
  font-family: "Segoe UI", Segoe, sans-serif;
  color: #444039;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.backgroundGrey {
  background: #f5f5f5;
  /*background: #b3b3ff;*/
}

.paddingTop10 {
  padding-top: 10px;
}

.paddingBottom10 {
  padding-bottom: 10px;
}

.paddingTop20 {
  padding-top: 20px;
}

.paddingBottom20 {
  padding-bottom: 20px;
}

.paddingLeft23 {
  padding-left: 23px;
}

.paddingRight23 {
  padding-right: 23px;
}

.marginTop10 {
  margin-top: 10px;
}

.marginTop20 {
  margin-top: 20px;
}

.marginBottom10 {
  margin-bottom: 10px;
}

.marginBottom20 {
  margin-bottom: 20px;
}

.marginLeft20 {
  margin-left: 20px;
}

.marginRight5 {
  margin-right: 5px;
}

.marginRight20 {
  margin-right: 20px;
}

.marginTop25 {
  margin-top: 25px;
}

.marginTop35 {
  margin-top: 35px;
}

.marginLeft100 {
  marginLeft: 100px;
}

.text12 {
  font-size: 12pt;
}

.text14 {
  font-size: 14pt;
}

.text16 {
  font-size: 16pt;
}

.text24 {
  font-size: 24pt;
}

.textRed {
  color: #e20a45;  
}

.textCenter {
  text-align: center;
}

.textLeft {
  text-align: left;
}

.textRight {
  text-align: right;
}

.text {
  width: 500px;
}

.text480 {
  width: 480px;
}

.textInactive {
  width: 254px;
}

.languageListBox {
  margin-left: 10px;
}

.textBox {
  width: 204px;
}

.listBox {
  width: 204px;
  font-size: 12pt;
  text-align: right;
}

.unit {
  width: 50px;
  text-align: center;
}

.button {
  color: white;
  background: #e31e24;
  font-size: 12pt;
  text-align: center;
  margin-bottom: 10px;
}

/* the button-style for a button within an action cell - ManageProjectsScreen */
.actionCellButton button {
  font-family: "Segoe UI", Segoe, sans-serif;
  background: #e31e24;
  white-space: pre-wrap;
  word-wrap: break-word;
  color: white;
  font-size: 12pt;
  text-align: center;
}

.link {
  font-size: 12pt;
  cursor: pointer;
  display: block;
}

.textArea {
  background_: white;
  border_: 1px solid #6c5c72;
  border-radius_: 5px;
  width: 204px;
  outline: none;
  white-space: pre;
  /* resize: vertical; */
}

.textLong {
  width: 700px;
}

/*************************************************************
ElkoOnlinePanelHeaderTop
*************************************************************/
.hpPanelHeaderTop1 {
  width: 602px;
  height: 67px;
  line-height: 72px; /* vertically align middle */
  padding-left: 23px;
}

.hpPanelHeaderTop2 {
  width: 152px;
  height: 67px; /* image-height */
  padding-right: 23px;
}

.imageLogo {
  cursor: pointer;
}



/*************************************************************
ElkoOnlinePanelHeaderLogInOutProjects
*************************************************************/
.hpPanelHeader1 {
  width: 250px;
  line-height: 28px; /* vertically align middle */
  background-color: white;
}

.hpPanelHeader2 {
  width: 300px;
  line-height: 25px; /* vertically align middle */
  background-color: white;
}

.hpPanelHeader2a {
  margin-left: auto;
  margin-right: auto;
  background-color: white;
}

.hpPanelHeader3 {
  width: 250px;
  line-height: 28px; /* vertically align middle */
  background-color: white;
}

.hpPanelHeader4 {
  width: 200px;
  line-height: 28px; /* vertically align middle */
  background-color: white;
}

.hpPanelHeader5 {
  width: 150px;
  line-height: 28px; /* vertically align middle */
  background-color: white;
}

.hpPanelHeader6 {
  width: 550px;
  line-height: 25px; /* vertically align middle */
  background-color: white;
}




/*************************************************************
ElkoOnlinePanelFooter
*************************************************************/
.hpPanelFooter {
  width: 266px;
  line-height: 25px; /* vertically align middle */
}



/*************************************************************
ElkoOnlineRootInput - WelcomeScreen
*************************************************************/
.background {
  background-image: url('images/background.png');
  /* z-index: -1; has no effect... */
}

.vpWelcomeScreen1 {
  width: 350px;
  height: 500px;
  padding: 20px 20px 20px 20px;  
}

.vpWelcomeScreen2 {
  width: 450px;
  height: 500px;
  padding: 20px 20px 20px 20px;
}

.coldEngineeringImage, .heatEngineeringImage, .solarEngineeringImage {
  margin-top: 10px;
  width: 399px;
  height: 116px;
  margin-left: auto;
  margin-right: auto;
}

.coldEngineeringImage {
  background-image: url('images/coldEngineering.png');
}

.heatEngineeringImage {
  background-image: url('images/heatEngineering.png');
}

.solarEngineeringImage {
  background-image: url('images/solarEngineering.png');
}

.engineeringLeft {
  width: 100px;
  height: 116px;
  cursor: pointer;
}

.engineeringMiddle {
  width: 249px;
  /*padding-top: 25px;*/
  color: white;
  cursor: pointer;
}

.engineeringRight {
  width: 50px;
  height: 116px;
}


/****************************************
EngineeringTitle (Cold/Heat/Solar)
****************************************/
.vpEngineeringTitle {
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
  margin-bottom: 20px;
}


/*******************************************************
StatusBar
*******************************************************/
.hpStatusBar1 {
  width: 153px;
  height: 75px;
  padding-left: 23px;
}

.hpStatusBar2 {
  width: 357px;
  height: 75px;
  padding-left: 20px;
  padding-right: 5px;
}

.hpStatusBar3 {
  width: 207px;
  height: 75px;
  padding-left: 5px;
  padding-right: 10px;
}

.hpStatusBar4 {
  width: 83px;
  height: 75px;
  padding-right: 28px;
}

.statusImage {
  width: 130px;
  height: 49px;
}

.engineeringImage {
  width: 55px; /* 164 */
  height: 69px; /*208*/
}

.hpInput {
  width: 800px;
  padding-left: 23px;
  padding-right: 23px;
  padding-bottom: 5px;
}

/* describes "text - input - unit" */
/* for engineering input screens */
/* 500+204+50+23+23 (paddingLeft/Right from hpInput) = 800
/* text */
.hpInput1 {
  width: 500px;
}

/* textbox */
.hpInput2 {
  width: 204px;
}

/* unit */
.hpInput3 {
  width: 50px;
  max-width: 50px;
}


/*******************************************************
HeatInputScreen
*******************************************************/
.alignRight50 {
  float: right;
  right: 100%;
  margin-right: 50px;
}

.overlineBlack1 {
  border-Top: 1px solid #444039;
}

.overlineBlack2 {
  border-Top: 2px solid #444039;
}

.underlineBlack1 {
  border-bottom: 1px solid #444039;
}

.underlineBlack2 {
  border-bottom: 2px solid #444039;
}

.overlineRed {
  border-Top: 2px solid #e31e24;
}

.underlineRed {
  border-Bottom: 2px solid #e31e24;
}

.underline {
  text-decoration: underline;
}

.hydraulicScheme {
  width: 497px; /* 995 */
  height: 267px; /* 534 */
  margin-top: 50px;
  margin-bottom: 20px;
}

.hpVpResult {
  border-bottom: 1px solid #444039;
  /* white-space: pre; */
}









/* h1 */
.h1 {
  font-size: 16pt;
  font-weight: bold;
  color: black;
  margin: 10px 40px 30px;
  text-align: left;
}

/* h2, h2Red */
.h2, .h2Red {
  font-size: 12pt;
  font-weight: bold;
  margin: 20px 40px 20px;
  text-align: left;
}

/* h2 */
.h2 {
  color: black;
}

/* h2Red */
.h2Red {
  color: red;
  background: #cfcfcf;
}

/* h3 */
.h3 {
  font-size: 12pt;
  color: black;
  margin: 20px 40px 20px;
  text-align: left;
  text-decoration: underline;
}
/* margin: oben  links  unten  rechts */

/* h4 */
.h4 {
  font-size: 14pt;
  color: black;
  margin: 30px 40px 20px;
  text-align: left;
  font-style: italic;
}

/****************************************************************/
/*                                                              */
/*                  Styles for Header-Elements                  */
/*                                                              */
/****************************************************************/

/* usernamePasswordText */
.usernamePasswordText {
  font-size: 12pt;
  text-align: left;
  margin-top: 10px;
  margin-left: 40px;
  margin-right: 10px;
}

/* usernamePasswordTextBox */
.usernamePasswordTextBox {
  width: 220px;
  margin-top: 10px;
  margin-left: 20px;
  margin-bottom: 1px;
  margin-right: 20px;
  font-size: 12pt;
  text-align: middle;
  box-shadow:3px 3px 3px #495676;
}

/* usernamePasswordButton */
.usernamePasswordButton{
  color: black;
  font-size: 12pt;
  margin-top: 10px;
  margin-left: 40px;
  margin-bottom: 1px;
  align: left;
  box-shadow:3px 3px 3px #495676;
  cursor: pointer;
}

/****************************************************************/
/*                                                              */
/*       Styles for Screens                                     */
/*                                                              */
/****************************************************************/

.engineeringButton {
  color: white;
  width: 300px;
  height: 75px;
  font-size: 12pt;
  margin-top: 10px;
  margin-left: 40px;
  margin-bottom: 1px;
  align: middle;
  box-shadow:3px 3px 3px #495676;
  cursor: pointer;
}

.headerScreenTopLink, .projectFilterAnchor {
  font-size: 12pt;
  color: blue;
  cursor: pointer;
}

.projectFilterAnchor {
  margin-left: 40px;
  width: 500px;
}

/* headerScreenLogInOut, headerScreenProjects */
.headerScreenTopLogInOut, .headerScreenProjects {
  margin-left: 220px;
}

/* headerScreenLogInOut */
.headerScreenTopLogInOut {
  margin-top: 20px;
}

.cellTableProject {
  width: 1200px;
  font-family: "Segoe UI", Segoe, sans-serif;
  color: #444039;
}
	

/****************************************************************/
/*                                                              */
/*       Styles for LanguageSelect                              */
/*                                                              */
/****************************************************************/

/* languageGerman */
.languageGerman {
  color: blue;
  margin: 0px 1px 0px 1px;
  font-size: 12pt;
  text-align: left;
  cursor: pointer;
}

/* languageEnglish */
.languageEnglish {
  color: blue;
  margin: 0px 50px 0px 1px;
  font-size: 12pt;
  text-align: left;
  cursor: pointer;
}

/****************************************************************/
/*                                                              */
/*                      Styles for Lines                        */
/*                                                              */
/****************************************************************/

.errorDisplayPanel {
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
  margin-bottom: 20px;
  text-align: center;
  border: 1px solid #6c5c72;
  border-radius: 5px;
  color: black;
}

.errorDisplayImage {
  padding: 5px 5px 5px 5px;
}

.errorDisplayLabel {
  font-style: italic;
  font-weight: bold;
  font-size: 12pt;
  text-align: center;
  width: 566px;
  height: 60px;
  /*margin: 10px 40px 10px;*/
  padding: 10px 10px 10px 10px;
  display: inline-block;
  white-space: pre-wrap;
}

/* securityTextBox-FormatError */
.securityTextBox-FormatError {
  background: red;
  color: white;
}



.textPrintUserdata, .textShort, .textFixed, .textProject, .textShowHeatingEngineeringResults {
  color: black;
  margin-top: 1px;
  margin-left: 40px;
  margin-bottom: 1px;
  font-size: 12pt;
  text-align: left;
  white-space: pre-wrap;
}

/* textFixed */
.textFixed {
  width: 256px;
  margin-left: 0px;
  margin-bottom: 10px;
  margin-right: 20px;
  font-weight: bold;
  text-align: center;
  box-shadow:3px 3px 3px #495676;
}

/* textPrintUserdata, textShowHeatingEngineeringResults */
.textPrintUserdata, .textShowHeatingEngineeringResults {
  margin-left: 10px;
  width: 700px;
}

/* textShort */
.textShort {
  width: 237px;
}

/* textProject */
.textProject {
  width: 100px;
}

.textPleaseLoginSolar {
  margin-top: 10px;
  margin-left: 40px;
  font-size: 12pt;
  text-align: left;
  width: 500px;
  font-style: italic;
  color: red;
}

/* lineShowHeatingEngineeringResults */
.lineShowHeatingEngineeringResults {
	margin-top: 10px;
	margin-bottom: 10px;
}

/* textCurrentUser */
.textCurrentUser {
  color: black;
  width: 100%;
  margin: 1px 1px 1px;
  font-size: 12pt;
}



/* textResultSelectionPresentation */
.textResultSelectionPresentation {
  color: black;
  width: 310px;
  font-size: 12pt;
  text-align: left;
  margin-left: 5px;
}

/* additionalTextResultSelectionPresentation, showAlsoHeatEngineeringResults */
.additionalTextResultSelectionPresentation, .showAlsoHeatEngineeringResults {
  color: black;
  width: 537px;
  word-wrap: break-word;
  font-size: 12pt;
  text-align: left;
  margin-top: 1px;
  margin-left: 40px;
  margin-bottom: 20px;
  border: 2px solid #6c5c72;
  border-radius: 5px;
  padding: 2px 5px 2px 5px;
  box-shadow:3px 3px 3px #495676;
  white-space: pre-wrap;
}

/* showAlsoHeatEngineeringResults */
.showAlsoHeatEngineeringResults {
  color: red;
}

/* valueResultSelectionPresentation */
.valueResultSelectionPresentation {
  color: black;
  width: 100px;
  margin-right: 0px;
  font-size: 12pt;
  text-align: right;
}

/* textInTheMiddle */
.textInTheMiddle {
  color: black;
  margin: 1px 350px 5px;
  font-size: 12pt;
  text-align: left;
}

/* textBoxLong */
.textBoxLong {
  width: 250px;
}

/* textBox-FormatError, textBoxLong-FormatError */
.textBox-FormatError, .textBoxLong-FormatError {
  background: red;
  color: white;
}



/* buttonLine2a */
.buttonLine2a {
  color: black;
  font-size: 12pt;
  margin-top: 1px;
  margin-left: 51px;
  margin-bottom: 1px;
  align: left;
  box-shadow:3px 3px 3px #495676;
}

/* buttonInRow */
.buttonInRow {
  color: black;
  font-size: 12pt;
  margin-left: 40px;
  margin-top: 10px;
  margin-bottom: 1px;
  align: left;
  box-shadow:3px 3px 3px #495676;
}

/* buttonInRow-Temp */
.buttonInRow-Temp {
  margin-left: 188px;
}

/* emptyBox */
.emptyBox {
  width: 220px;
  margin-top: 1px;
  margin-bottom: 1px;
  margin-left: 500px;
  margin-right: 20px;
  font-size: 12pt;
  text-align:  middle;
}

/* articleId */
.articleId {
  color: black;
  font-size: 12pt;
  width: 100px;
  margin-top: 1px;
  margin-bottom: 1px;
  margin-right: 10px;
  text-align: middle;
}

/* ************************************************************************** */
/* ********** head line for Selection / Presentation Screen        ********** */
/* ********** main/optional line for Selection/Presentation Screen ********** */
/* ************************************************************************** */

/* selectionPresentationScreenHead, selectionPresentationScreen, shorttextSelectionPresentationScreenHead, shorttextSelectionPresentationScreen, priceSelectionPresentationScreen*/
.selectionPresentationScreenHead, .selectionPresentationScreen, .shorttextSelectionPresentationScreenHead, .shorttextSelectionPresentationScreen, .priceSelectionPresentationScreen {
  font-family: "Segoe UI", Segoe, sans-serif;
  color: #444039;
  font-size: 12pt;
  margin-top: 1px;
  margin-left: 5px;
  margin-bottom: 5px;
  text-align: center;
}

.selectionPresentationScreenHead, .shorttextSelectionPresentationScreenHead {
  /*font-weight: bold;*/
  text-decoration: underline;
}

/* selectionPresentationScreenHead, selectionPresentationScreen */
.selectionPresentationScreenHead, .selectionPresentationScreen {
  width: 110px;
  white-space: pre-wrap;
  word-break: break-all;
}








/* shorttextSelectionPresentationScreenHead, shorttextSelectionPresentationScreen */
.shorttextSelectionPresentationScreenHead, .shorttextSelectionPresentationScreen {
  width: 390px;
}

/* priceSelectionPresentationScreen */
.priceSelectionPresentationScreen {
    width: 100px;
	text-align: center;
}

/* shorttextSelectionPresentationScreen */
.shorttextSelectionPresentationScreen {
  border: 1px solid #6c5c72;
  overflow-wrap: break-word;
  white-space: pre-wrap;
  padding-left: 5px;
  text-align: left;

/*
  color: black;
  width: 490px;
  overflow-wrap: break-word;
  font-size: 12pt;
  text-align: left;
  margin-top: 1px;
  margin-left: 40px;
  margin-bottom: 20px;
  border: 2px solid #6c5c72;
  border-radius: 5px;
  padding: 2px 5px 2px 5px;
  box-shadow:3px 3px 3px #495676;
  white-space: pre-wrap;

/*word-break: break-all;
  word-wrap: break-word;
  white-space: pre;
  display: inline-block;*/
}

/* imageSelectionPresentationScreen */
.imageSelectionPresentationScreen {
  width: 84px;
  height: 185px;
  margin-right: 15px;
}

.selectionPresentationScreenAddonGroupsHead {
  font-family: "Segoe UI", Segoe, sans-serif;
  color: #444039;
  font-size: 12pt;
  margin-top: 25px;
  margin-left: 50px;
  margin-bottom: 20px;
  text-decoration: underline;
}

/* presentationScreenTotalPrice */
.presentationScreenTotalPrice {
  font-family: "Segoe UI", Segoe, sans-serif;
  color: #444039;
  font-size: 12pt;
  font-weight: bold;
  margin-top: 25px;
  margin-bottom: 15px;
  margin-right: 20px;
  text-align: right;
  text-decoration: underline;
}