html, body
{
    height: 100%;
    width: 100%;
} /* you need this to allow for 100% on any other elements */
  
/* enable to use an empty jQuery UI icon */
/* see http://stackoverflow.com/questions/2900377/does-the-jquery-ui-icon-system-have-an-empty-icon-one-with-no-image */
.ui-icon-empty { background: none !important; }

.eConLogo {
    display: block;
    height: 87px;
    float: right;
    margin-right: 2px;
}
.verticalAlignFix {
    display: inline-block;      
    height: 100%;      
    vertical-align: middle;
}
.eConLogo img {
    vertical-align: middle;                                                  
    max-height: 87px;
    border: 0px;
}

#oDocumentContentContainer, #oDocumentContent {
    height: 100%;
    width: 100%;
    border: 0px;
}

.ui-dialog.ui-front { /* Otherwise, dialogs in RunAsChild appears behind the overlay */
    z-index: 101;
}
.ui-dialog .configure-input-dialog.ui-dialog-content, 
.ui-dialog .popup-dialog.ui-dialog-content {
    overflow: hidden;
    padding: 0px;
}

.configure-input-dialog iframe,
.popup-dialog iframe {
    border: 0 none;
}
.configure-input-dialog .ui-progressbar,
.popup-dialog .ui-progressbar {
    position: absolute;
    top: 50%;
    left: 0px;
    right: 0px;
}

div.howwhy-dialog.ui-dialog-content {
    overflow: hidden;
}

.scroll-wrapper {
    -webkit-overflow-scrolling: touch;
    overflow-y: scroll;

    height: 100%;
    width: 100%;
    /* important:  dimensions or positioning here! */
}

.howwhy-dialog iframe {
    border: 0 none;
}

#oMainContainer {
    /*display: table;*/
    height: 100%;
    width: 100%;
}
/* top header */
#oButtonsContainer {
    /*display: table-row;*/
    /*position: fixed;*/
    float: left;
    clear: both;
    width: 100%;
    /*top: 0;
    height: 135px;
    overflow: hidden;*/
    margin-bottom: 0px;
    position: relative;
}
/* main */
#oMain1Container {
    /*display: table-row;*/
    /*height: 100%;*/
    /*padding-top: 135px;*/ /*header height*/
    /*float: left;*/
    clear: both;
    padding-bottom: 26px; /*footer height*/
    width: 100%;
    height: 100%; /*fix before resize*/
}
/* bottom footer */
#oInfoContainerRow {
    /*display: table-row;*/
    position: fixed; /* Solves Chrome scroll issue*/
    bottom: 0;
    left: 0;
    overflow: hidden;
    border-right: 0;
    border-left: 0;
}

#oTreeStructure {
    /*display: table;
    height: 100%;
    width: 100%;*/
    height: 100%; /*fix before resize*/
}
/* left */
#oTreeContainer {
    /*display: table-cell;*/
    float: left;
    width: 15%; /* override in Init.js */
    height: 100%; /*fix before resize*/
}
/* right */
#oMain3Container {
    /*display: table-cell;*/
    float: left;
    /*width: 84.8%;*/ /*does not work together with tree specified width*/
}

#oMessageBoxStructure {
    /*display: table;
    height: 100%;
    width: 100%;*/
}
/* top */
#oMain4Container {
    /*display: table-row;
    height: 100%;*/
}
/* bottom */
#oMessageBoxContainer {
    /*display: table-row;*/
    position: fixed;
    left: 0px;
    right: 0px;
    /*bottom: 41px;*/ /* Removed this line, since on small devices the switch buttons might get below the invalidfields / messages line */

}

.tabsStructure {
    /*display: table;
    height: 100%;
    width: 100%;*/
}
.tabs {
    /*display: table-row;*/
}
.eConTabs {
    border: 0 !important;
}
.eConTabs.ui-tabs.ui-state-disabled li a {
    cursor: default;
	outline: 0px;
}
.tab.ui-tabs-active.ui-state-active:not(.tabOn) a.ui-tabs-anchor {/* Progress tab */
    cursor: pointer;
}
.configViewbox {
    padding: 10px 19px;
    vertical-align: top;
	position: relative;
}

div.eConButtons {
    white-space: nowrap;
}
div.eConControl {
    width: 100%;
    position: relative;
}
div.eConButtons {
    float: right;
}

table.matrixproperties .eConControl input + .eConButton {
    position: absolute;
    top: 0;
    right: -2px;
}
table.matrixproperties TD.matrixproperties {
    overflow: visible;
}
.eConButtons .eConButton {
    width: 19px;
    height: 16px;
}
td.eConTD > div.eConButtons,
td.eConTD > div.eConControl {
    display: inline-block;
}
table.eConTABLE.max0buttons .eConButtons {
    display: none;
}
table.eConTABLE.max1buttons .eConButtons {
    width: 19px;
}
table.eConTABLE.max2buttons .eConButtons {
    width: 38px;
}
table.eConTABLE.max3buttons .eConButtons {
    width: 57px;
}
table.eConTABLE.max4buttons .eConButtons {
    width: 76px;
}
table.eConTABLE.max5buttons .eConButtons {
    width: 95px;
}
table.eConTABLE.max6buttons .eConButtons {
    width: 114px;
}

div.eConLabel {
    /*float: left;*/
    clear: both; /*because of the control float, labels positioned at bottom will not be displayed right if not cleared*/
}
.eConLabelText {
    padding-right: 0.5em;
}
.eConLabelText.expandable {
    margin-left: 14px;
}
button.eConButton.eConExpandCollapseReferenceButton.ui-button+.eConLabelText {
    margin-left: 0px;
}

.sectionlabel {
    display: block;
    font-weight: bold;
    font-size: 1.2em;
    /*border-bottom: 1px solid #C8C8C8;*/
}
.sectionlabel:before {
    content: "";
    position: relative;
    left: 0px;
    top: 0px;
    color: transparent;
    padding: 1px;
    margin-right: 4px;
}

BODY
{
    overflow: hidden;
	margin: 0;
    font-size: 10.5px;
    position: fixed;
}
.ui-button-icon-only {
    width: 1.8em; /*2.2em*/
}
button.ui-button-icon-only {
    width: 2em; /*2.4em*/
}
.ui-button-icon-only .ui-button-text, .ui-button-icons-only .ui-button-text {
    padding: 0.2em; /*0.4em*/
}
.ui-button-text-only .ui-button-text {
    padding: 0.2em 1em; /*0.4em 1em*/
}
.ui-tabs .ui-tabs-nav li a {
    padding: 0.4em 1em; /*0.5em 1em*/
}
.ui-state-disabled,
.ui-widget-content .ui-state-disabled,
.ui-widget-header .ui-state-disabled,
.ui-widget-content .eConControl .ui-state-disabled,
.eConDisabled {
    opacity: 0.75;
    filter: alpha(opacity:75);
}

.eConTD {
	padding: 2px;
    vertical-align: top;
}

.eConTH {
	padding-bottom: 10px;
    font-size: 1.2em;
    text-align: left;
}
TD
{
    
}
TH
{
    
}
INPUT, TEXTAREA, SELECT
{   
    /*padding: 0.3em;*/
    padding: 0.1em;
    margin: 0;
}
TEXTAREA {
    overflow: auto;
}
.eConRichTextEditor { /* Placeholder to avoid jumpy screen */
    height: 100px;
    margin: 49px 0px;
}

.eConSvgDrawing {
    opacity: 1;
    overflow: auto;
}

.eConRadioLabel {
    padding-right: 8px;
}
.eConRadioLabel * {
    vertical-align: middle;
}
input.eConImageRadioLabel,
input.eConImageCheckbox {
    /*display: none;*/ /* This breaks the focus (tab, enter, etc). opacity:0; is working fine. */
    opacity: 0 !important;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)" !important; /*IE8 fix */
    /* Make sure the control is not consuming any space */
    position: absolute;    
}
.eConImageRadioLabel {
    background: none;
    margin-right: 3px;
    padding: 1px;
    cursor: pointer;
}
.eConImageRadioLabel.ui-state-highlight {
    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 1.0);
    box-shadow: 0 0 5px rgba(0, 0, 0, 1.0);
    border-width: 2px;
    border-collapse: separate; /*IE9*/
}
/* BEGIN For optionpopup + optiontext */
.eConRadioButtonsCell {
    position: relative;
    display: flex;
    flex-direction: row;
}
.eConRadioButtonsCell input.eConImageRadioLabel {
    bottom: 22px;
}
label.eConImageRadioLabel {
    margin-bottom: 35px;
}
.eConRadioButtonsCell button.ui-state-default {
    position: absolute;
    top: 0px;
    right: 0px;
    border: 0px;
    background: 0px;
    width: 20px;
    height: 20px;
}
.eConRadioButtonsCell button .ui-icon{
    background: url("../images/Info_small.png");
}
.eConRadioButtonsCell .optiontext {
    text-align: center;
	display: block;
}
.eConRadioButtonsCell .eConInvalidOption ~ .optiontext {
    text-decoration: line-through;
}
/* END For optionpopup + optiontext */

.eConRadioButtons {

}
.eConRadioButtonsRow {
    float: left;
    clear: both;
}
.eConRadioButtonsCell 
{
    float: left;
    padding: 0.1em 0;
}
.eConInvalidOption img {
    opacity: 0.5;
}

A.eConP:visited
{
   
}
A.eConP:link
{
   
}
A.eConP:active
{
    
}
A.eConP:hover
{
    
}

.eConMain
{

}

.eConInfo
{
	text-align: right;
    float: right;
}

.eConCommandButtonsDIV
{
	width: 100%;
}

.eConTabDIV 
{
	padding-left: 9px;
}

.eConTabTABLE {
	border: 0px;
	border-collapse: collapse;
	width: 100%;
}

/*
.eConDIV {
	border: 1px solid #7FA7E1;
	background-color: #fffbff;
	z-index: 0;
	position: relative;
	top: -1px;
	width: 100%;
}
*/
/*
.eConSPAN 
{
	width: 100px;
}
*/

#oMessageButton
{
	
}
.messageLine {
}
.messageLine .ui-icon {    
    margin: 0 15px 1em 0;    
}
.messageLine .message {
    margin-top: 1px; /* To align text with icon */
}
.messageLine .ui-icon,
.messageLine .message {
    display: inline-block;
    vertical-align: top;
}

#oMain3Container {
    /* separation border with tree */
    border-left: 1px solid #eeeeee;
    /* apply class ui-corner-tl? */
}

#oImageHolderContainer {
    border: 0 solid #eeeeee; /* border-width influenced by rendering position */
}
#oImageHolderContainer.eConImageHolderLeft {
    border-right-width: 1px;
}
#oImageHolderContainer.eConImageHolderRight {
    border-left-width: 1px;
}
#oImageHolderContainer.eConImageHolderTop {
    border-bottom-width: 1px;
}
#oImageHolderContainer.eConImageHolderBottom {
    border-top-width: 1px;
}
#tdImages {
    padding: 3px;
}
#oImageViewbox {
    position: relative;
    overflow: auto;
}

.ImageViewboxtop
{
	/*	height:200px;	*/
}
.ImageViewboxbottom
{
	/*	height:200px;	*/
}
.ImageViewboxleft
{
    /*	width: 300px;	*/
}
.ImageViewboxright
{
	/*	width: 300px;	*/
}

/*
.eConTABLE {
	position: relative;
	width: 100%;
	table-layout: fixed;
}
*/

.eConHeadTR {
}

.eConEvenTR {
}

.eConOddTR {
}


.eConEmptyTH {
}

.eConEvenTD {
}

.eConOddTD {
}

.eConImgTR {
}

.eConImgTD {
}

.eConImgDIV {
	position: relative;
}

.eConIMG {
}

.eConTdIMG {
}

.eConTdSPAN {
}

.eConTdA {
}


/*hide the reference control if it has a fixed value*/
.eConExpandableReferenceRow > td > div.eConControl > input.ui-state-disabled {
    visibility: hidden;
}

.eConMain .eConExpandCollapseReferenceButton.ui-button {
    margin-left: -0.4em; /*align with left of other labels*/
    margin-right: 0.4em;
    margin-bottom: 0.4em;
    background: none;
    border: 0;
    width: 1.2em;
}
.eConMain .eConExpandCollapseReferenceButton:focus {
    outline: 1px dotted;
}

.eConSelected {
	cursor: pointer;
	background-color: #7FA7E1;
	color: white;
	/* padding: 2px; */
}

DIV.eConEditor
{
}
SPAN.eConEditor
{
}
.eConZoomEditor
{
}

TABLE.eConTableSelect {
	border: 1px solid steelblue;
}
TR.eConTableSelect {
}
TD.eConTableSelect {
	border: 1px solid steelblue;
}
TD.eConTableSelected {
	border: 1px solid red;
}

TABLE.eConOption {
	width: 100%; 
	border: 1px;
}

THEAD.eConOption {
}
TBODY.eConOption {
}

TR.eConOptionHead {
	
}
TH.eConOptionHead {
	
}

TR.eConOptionEven {
	background-color: lightsteelblue;
}
TR.eConOptionOdd {
	background-color: steelblue;
}
TR.eConOptionInvalid {
	text-decoration:line-through;
}

TD.eConOptionEven {

}

TD.eConOptionOdd {
	
}

A.eConOption {
	
}

IMG.eConOption {
	
}

.eConHowWhyTABLE {
	
}

.eConHowWhyTR {
	
}

.eConHowWhyTD {
	
}

.eConHowWhyTEXTAREA {
	
}

.eConMemberNormal
{
}


.eConButtonTD
{
	width: 100%;
	margin: 0px;
}
.eConButtonTABLE
{
    BORDER-RIGHT: 0px;
    BORDER-TOP: 0px;
    BORDER-LEFT: 0px;
    BORDER-BOTTOM: 0px;
    height: 17px;
	width: 100%;
}

#pbar
{
	border: 2px ridge;
	display:none;
	position: absolute;
	width: 300px;
	height: 50px;
	left: 300px;
	top: 100px;
}
#ptable 
{
	margin: 5px;
	width: 300px;
	border: 1px inset;
}
#pinfo 
{
	margin: 5px;
	color: #000099;
	width: 100%;
}
TD.progressstep 
{
	height: 10px;
}

TD.progressstepFinished 
{
	height: 10px;
	width: 	10px;
	background-color:  #8500B4;
	color: #AF86D4;
}

TD.progressstepUnfinished 
{
	height: 10px;
	width: 	10px;
	color:  #8500B4;
	background-color: #AF86D4;
}

/* Dialogs */
.eConDialog
{
	width: 300px;
	height: 350px;
}
.eConDialogTitle 
{
	width: 100%;
	margin-top: 10px;
	margin-bottom: 5px;
	font-size: 14px;
	height: 25px;
}
.eConDialogLabel
{
	width: 100px;
}
.eConDialogInput 
{
}
.eConDialogButtons 
{
	margin-top: 10px;
	margin-bottom: 5px;
}
.FLabelStyle 
{
	background-color: yellow;
}
.GControlStyle 
{
	border: 4px solid red;
}

.hidden, .hiddenR
{
	visibility: hidden;
	border-color: transparent !important;
}
div.hidden
{
	display: none;
}


.vrml
{
	width: 600px;
	height: 400px;
}

.eConDrawing
{
	border: 1px solid red;
}

.eConColumn
{
	height: 21px;
}
.advicebox
{
	margin-left: 20px;
	width: 300px;
	height: 200px;
	border: 1px solid steelblue;
}
.iframe
{
	width: 100%;
}

.moneybox
{
  border: 1px solid steelblue;
  text-align: right;
  padding-right: 5px;
}

.moneybox_ro
{
  border: 1px solid #FFFFFF;
  text-align: right;
  padding-right: 5px;
}

.econTextUPLOAD
{
	width: 40px;
}
.eConTextUPLOADADV
{
	position:relative;
	filter:alpha(opacity:0);
	z-index: 2;
}
div.fakeupload 
{
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 1;
}
input.fakeupload 
{
	border: 0px;
}
button.fakeupload
{
	height: 20px;
	width: 75px;
	margin-left: 3px;
}

/* the main e-Con containers, Styles are defined for specific element ID's */
#oMainContainer
{
	
}
#oConfigContainer
{
    overflow: auto;
    position: relative; /* fix for controls that use position relative inside (IE<8) */    
}

.configTable 
{
    table-layout: fixed;
    width: 100%;
    padding: 10px;
}
#oTreeContainer
{
	/*overflow: auto;*/
}

#oInfoContainerRow
{
    width: 100%;
    min-height: 41px; /* on small devices the switch buttons might get below the invalidfields / messages line */
}
#oInfoContainer
{
	padding: 5px 10px;
}
#oInfoContainer a {
    display: inline-block;
    margin-left: 5px; /*for multiple items*/
    margin-bottom: 5px;  /* a little spacing for when on top of buttons */
    margin-top: 7px; /* When device switch buttons not available */
}
#oInfoContainer a span.icon {
    float: left;
    margin:0 7px 0 0;
}
#oInfoContainer a:hover {
    color: gray;
}
/* Progress Tab in statusbar */
#oInfoContainerRow .eConTabs {
    padding: 0px;
    display: inline-block;

    position: fixed;
    bottom: 1px;
}
#oInfoContainerRow .eConTabs .tabs {
    background: none;
    border: none;
}
#oInfoContainerRow .eConTabs .tabs li {
    border-bottom: inherit;
}
#oMessageContainer
{
    
}

/* What If styling */
#WhatIfDIV
{
    line-height: 18px;
}

.whatIfTABLE {
    border-spacing: 0;
    width:100%;
    margin: 5px;
}

.whatIfTABLE td {
    padding-left: 5px;
    width: 33%;
}

.whatIfTABLE caption {
    height: 25px;
    line-height: 25px;
}

.customHeader
{
	display:none;
}

.eConSwitchStyle {
    border-bottom: medium none;
    border-right: medium none;
    border-top: medium none;
    display: inline-block; /* Make sure all buttons are in same row. When buttons are below each other, it consumes more space */
    margin-left: 1em;
}
.eConSwitchStyle *:not(:first-child) {
    margin-left: .5em;
    display: inline-block; /* For iPad */
}

.eConInvalidOption {
    text-decoration: line-through;
}

.eConTextINPUTDisabled {
    border: none;
}

/* Style for a button with a 32x32 icon */
.eCon32x32IconButton.ui-button-icon-only {
    padding: 0.8em;
    width: 3.5em;
}

.eCon32x32IconButton.ui-button-icon-only .ui-icon {
    height: 32px;
    margin-left: -16px;
    margin-top: -16px;
    width: 32px;
}

.eConHelpButton {
    background: none repeat scroll 0 0 transparent;
    border: 0 none;
    /*vertical-align: super;*/
}

.dialog-progress-bar {
    clear: both;
}

.collapsed
{
    display:none;
}

ul.ui-autocomplete {
    overflow-y: auto;
}
/* To compensate newer theme's */
.ui-autocomplete.ui-menu li.ui-menu-item {
    padding: 0px;
    margin: 0px;
}
.ui-autocomplete.ui-menu li.ui-menu-item a {    
    margin: 0px;
    border: 0px;
}
.ui-menu .ui-menu-item a {
    text-decoration: none;
    display: block;
}

.eConControl INPUT, 
.eConControl TEXTAREA, 
.eConControl SELECT,
.eConControl img,
.eConControl span {
    max-width: 100%;
    /* fix to not calculate the padding in width */
    box-sizing:border-box; 
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
}

.mnemonic-key {
	text-decoration: underline;
}

:-moz-placeholder {
   font-weight: normal;
   font-style: italic;
}
::-moz-placeholder {
    font-weight: normal;
   font-style: italic;
}
:-ms-input-placeholder {
    font-weight: normal;
   font-style: italic;
}
::-webkit-input-placeholder {
   font-weight: normal;
   font-style: italic;
}

/* Switch button styles */
.eConSwitchStyle button, .eConSwitchStyle a {
    cursor: pointer;
    text-decoration: none;
}

.eConSwitchStyle label.ui-button {
    background-repeat: no-repeat;
    height: 30px;
    width: 42px;
}

.eConSwitchStyle #desktop+label.ui-button {
    background-image: url('../images/desktop.png');  
}

.eConSwitchStyle #mobile+label.ui-button {
    background-image: url('../images/mobile.png');
    margin-right: 0px; /* Alignment when below invalidfields / messages */
}

.eConSwitchStyle #mobileButtons {
    margin-right: 0px; /* Alignment when below invalidfields / messages */
}

/* Hide the touch buttons for now. In Touch.css, it will be shown if not-IE8 */
.eConSwitchStyle #deviceButtons {
    display: none;
}

.eConSwitchStyle #touch+label.ui-button {    
    background-image: url('../images/touch.png');    
}

.eConSwitchStyle #classic+label.ui-button {
    background-image: url('../images/mouse.png');    
}

/*  Disable all extra browser buttons, 
    Since it�s just confusing and it might not work properly
*/
input::-webkit-clear-button,
input::-webkit-inner-spin-button,
input::-webkit-outer-spin-button  {
    -webkit-appearance: none;
    margin: 0;
}
input[type=time].eConTimePicker,
input[type=number].eConSpinner {
    -moz-appearance:textfield;
}

.loading {
    position: absolute;
    top: 50%;
    left: 50%;
    padding: 10px 20px 10px 35px;
    margin-left: -60px;
    margin-top: -20px;

    color: black;
    font-size: 15px;
    
    background: url("../images/loading.gif?v=2") no-repeat 10px center;
    opacity: 0.5;
    filter:alpha(opacity:50);   
}

.ui-tabs .ui-tabs-nav {
    padding: 2px 2px 0px !important; /* Needed, since properties are 'cut off' when combined with tabs - in Chrome only */
}

/* Statusbar labels */
.statusbar-labels {
	vertical-align: bottom;
	display: inline-block;
	text-align: right;	
}
.statusbar-label {
	display: inline-block;
	margin-left: 2em;
}
.statusbar-label .eConLabelText {
	padding-right: 0px;
	font-size: 0.9em;
}
.statusbar-label .value {
    font-style: italic;
    margin-top: 2px;
}
.Grey, .grey
{
	color:#8c9096;
}
.GreyCrossed, .greycrossed
{
	color:#8c9096;
    text-decoration: line-through !important;
}
.RedUnderline,
.redunderline {
	color: #FF0000;
    text-decoration: underline;
}

@media only screen and (max-width: 550px) {
    #oImageHolderContainer{
    display:none!important;
}}

.dialog-text {
    display:block;
    white-space: pre-line;
}

.DarkRed,
.darkred {
	color: #d60000;
    font-weight: bold;
}

.top-part-number{
    opacity: 1!important;
    font-weight: bold;
    font-size: 1.1em;
}

.normal-text{
    opacity: 1!important;
    font-size: 1.1em;
}