/******************* project specific settings *****************/
/********************trial for setpoint values **********
div.ui-slider 
{

	height: 30px;
	margin-top: 0px;
	margin-bottom:0px;
	zoom: 1;
}
*********************************************************/

.ui-header .ui-title.isLogJavascript {
    text-decoration:underline;
}

.ui-header .ui-title.isLogJavascriptVerbose {
    text-decoration:overline;
}


span.debugdata {
    font-size:80%;
    display:none;
}

 .showDebugInfo span.debugdata {
     display:inline;
}

 .membersNotFoundContainer {
     width:100%;
     text-overflow:ellipsis;
 }

 .membersNotFound {
     font-size:90%
 }

 table.uix-rowgroups tbody tr td {
     background-color:#fff9df;
     opacity:0.75
 }

 tr.rowgroup-0 td,
 table.uix-rowgroups tbody tr.rowgroup-0 td
  {
    background-color:white;
}

 /*structure extensions*/
 .ui-controlgroup-horizontal .ui-input-text {
     float:left;
 }


 .ui-controlgroup span.extra {
     /*create datapackage approvals */
    display:block;
    margin-top:0.2em;
    margin-right: 3em;
    margin-bottom:0.5em;
    text-align: right;
    
}

/*theme extensions*/
.ui-body-a .ui-content h2.ui-title,
.ui-body-b .ui-content h2.ui-title {
    color:#215F41; /*color of PlantName in /Home/Index */
}

fieldset.uix-groupbox  {
    border:1px solid black;
    padding:10px
}

fieldset.uix-groupbox legend  {
    font-size:120%;
}

tr.uix-highlighted td {
    background-color:#fabb00;
}

tr.uix-highlighted td:first-child {
    border-left:1em solid #02542d;
}

.uix-highlightable .ui-btn-up-a.ui-btn-active {
    /*active in a highlight area should really be highlighted when preselected/clicked */
    background:#fabb00;
}

.uix-nopadding .ui-content {
    padding-left:0; /*no padding for the content so that the grid-blocks margins define the space to the screen-end, thk*/
    padding-right:0;
}

.ui-listview.uix-simple .ui-btn-hover-a {
    background:#FFF; /*no highlighting when mouse over*/
}

.ui-listview.uix-simple .ui-li.ui-focus {
    box-shadow:none; /*no highlighting when user clicks the links*/
}

.ui-listview.uix-simple:not(.with-border) li {
    border:0;
}

.ui-listview.uix-simple {
    margin:0; /*listview in grid-block should start at the left border of the grid-block*/
}

/*silver style form elements*/

.ui-content div.ui-input-text {
    background-color:#FFFBFF;
    /*background: linear-gradient(#FFFBFF, #FFFBFF, #EFEFEF, #E7E7E7) repeat scroll 0 0 #FFFBFF;
        */

    /*silber dark bright border, copied to ui-submit button*/
    border: 2px solid #75736E;
    padding: 5px 5px 5px 15px;
    border-radius:0px;
    border-bottom-color:#F1F0EE;
    border-right-color:#F1F0EE;
    box-shadow:0 1px 0 rgba(0, 0, 0, 0.3) inset;
}

.ui-content textarea.ui-input-text {
    background-color:#FFFBFF;
}


.ui-content div.ui-btn,
.ui-content div.ui-radio
 {
    background:repeat scroll 0 0 #E7E7E7;
    /*
    background-image: linear-gradient(#FFFBFF, #FFFBFF, #EFEFEF, #E7E7E7); /*when the browser does not recognize the gradient,
                                                                             the background from the overwritten css rule (ui-btn-x-up) is used* /    
    */

    /*silver dark bright border, copied to ui-submit button*/
    border: 2px solid #75736E;
    border-radius:0px;
    border-top-color:#F1F0EE;
    border-left-color:#F1F0EE;
}

.ui-content div.ui-btn .ui-btn-inner,
.ui-content div.ui-radio .ui-btn-inner
 {
    background-color:#FFF;
    /*
    background: linear-gradient( #D6DBDE,#E7E7EF, #FFFBFF, #FFFBFF) repeat scroll 0 0 #FFFBFF;
    */

    margin: 3px 5px 5px 3px; /*makes background-setting of div.ui-btn visble*/
    padding:0.6em 20px;
}

.ui-content .ui-select div.ui-btn .ui-btn-inner {
    /*restores value from structure because the padding from above is not useful for selects*/
    padding-right: 45px;
}


.ui-content div.ui-input-text.ui-focus, .ui-content .ui-btn:focus, .ui-content .ui-btn.ui-focus {
    -moz-box-shadow: 0 2px 3px #235228 /*{global-active-background-color}*/, 2px 0 9px #235228 /*{global-active-background-color}*/, 0 -2px 3px #235228 , -2px 0 9px #235228;
	-webkit-box-shadow: 0 2px 3px #235228 /*{global-active-background-color}*/, 2px 0 9px #235228 /*{global-active-background-color}*/, 0 -2px 3px #235228 , -2px 0 9px #235228;
	box-shadow: 0 2px 3px #235228 /*{global-active-background-color}*/, 2px 0 9px #235228 /*{global-active-background-color}*/, 0 -2px 3px #235228 , -2px 0 9px #235228;
}

.ui-content div.ui-select div.ui-btn .ui-btn-inner {
    margin:0px;
    padding-left:0.3em;
}

.ui-content .ui-icon-checkbox-on {
    border: 1px solid #B5B2B5;
}

.ui-content .ui-icon-checkbox-off {
    border: 1px solid #B5B2B5;
    background: /*linear-gradient(#FFFBFF, #FFFBFF, #EFEFEF, #E7E7E7) repeat scroll 0 0*/ #FFFBFF;
    
}

.smart-tablet-container
{
	margin-right:auto;
	margin-left:auto;
	display:block;
	min-width:360px;
	max-width:360px;
	border:5px solid #FFFFFF;
	min-height:520px;
}

.headerpicturecontainer
{
    display:none; /*only display when screen size is small enough, see below*/
	width: 94%; /*space between header and left/right screen*/
	overflow: hidden;
    margin:-15px auto 15px auto; /*center the header*/
    /*
    margin-top:-15px;
    margin-bottom:15px;
    margin-left:auto;  
    margin-right:auto;
   */
}

.headerpicturecontainer .headerlogo
{
	width: 33.3%;
	float: left;
}

.headerpicturecontainer .headerpicture
{
	width: 66.7%;
	float: left;
}

@media (max-width:600px) {
    .headerpicturecontainer {
        display:block; /*show header when display is small enough*/
    }
}

.headerpicturecontainer.fixed
{
    display:block; /*when fixed, always show the header*/
	max-width: 360px;
    margin-left:auto;
    margin-right:auto;
}

.headerpicturecontainer.filling {
    margin:0;
    width:100%;
}

.status-box-big
{
	float: left;
	/*margin-left: 3px;*/
    /*margin-right:3%;*/
	margin-top:16px;
    width:51%;
	/*width: 189px;  */
	height: 90px;
    background-color:rgb(250,187,0);
	/*background-image:url(../images/screen_big.jpg);*/
	text-align: center;
    border:3px solid rgb(215,220,224);
}

.status-box-main {
    background-color: rgb(250, 187, 0);
    border: 3px solid rgb(215, 220, 224);
    /*display: table;*/
    display: table-cell;
    float: none;
    /*
    //not together with table-cell
    margin-right: 3px;  
    margin-top: 1.2em;
    */
    position:relative;
    text-align: left;
    width: auto;
}

div.status-box-main,
span.status-box-header,
ul.status-box-state {
    background-color: rgb(250, 187, 0);
    border: 3px solid rgb(215, 220, 224);
}

.status-box-main.ui-block-a,
.status-box-state.ui-block-b {
    width:48%;
    margin-right:2%;
    padding:10px;
}

.status-box-state
{
    /*background-color:rgb(250,187,0);*/
    /*border:3px solid rgb(215,220,224);*/
	display: table-cell;
    float: none;
    /*
        //not together with table-cell
    margin-left:3px;
    margin-top:16px !important;
    */
    padding-right: 5px;
    text-align: right;
    width: auto;
    /*height: 55px;*/
}

ul.status-box-state li.ui-li {
    background-color:transparent;
    padding:2px 0;
}

.status-box-small
{
	float: right;
    /*margin-left:6px;
    margin-right:3px;*/
	margin-top: 16px;
	/* width: 134px; */
    width : 40%;
	height: 90px;
    background-color:rgb(250,187,0);
	/*background-image:url(../images/screen_small.jpg); */
	text-align:center;
    border:3px solid rgb(215,220,224);
}

.status-box-state,
.status-box-main
{
    min-height:4.7em; /*set a fixed size, more content is hidden*/
}

.status-box-container {
    display: table;
    padding-top:1em;
    width: 100%;
}

.status-box-state.error {
    background:red;
}

.status-box-header {
   border-bottom: 0 none !important;
    border-radius: 4px 4px 0 0;
    display:none; /*display: block;*/
    font-size: 90%;
    height: 1.1em;
    left: 0.4em;
    overflow: hidden;
    padding: 0.1em;
    position: absolute;
    text-overflow: ellipsis;
    top: -1.3em;
    white-space: nowrap;
    width: 150px;
}

.treestring {
    font-family:"Courier New";
}


.status-title
{
	width: auto;
	font-family: Arial, Helvetica, sans-serif;
	font-size:18px;
	font-weight:bold;
	color:rgb(33,95,65);
	padding-top:2px;
    display:none;
    overflow:hidden;
    text-overflow:ellipsis;
    margin:2px 0 2px 5px;
}

/*
.status-title-text {
}
*/

.status-image {
    display: table-cell;
    padding: 2px 5px;
    vertical-align: middle;
}


.status-image img {
    vertical-align: middle;
}

.status-value {
    color: #215f41;
    display: table-cell;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 18px;
    /*margin-left: 5px;*/
    overflow: hidden;
    /*padding: 3px 0;*/
    vertical-align: middle;
}

.status-box-main .status-value {
    text-align:center;
    display:block;
}

.status-value.value-and-unit {
    font-size: 36px;
    font-weight: bold;
    text-align:left;
    display:table-cell;
}


/*
.status-box-main-part:first-child .status-title {
    display:block;
}
*/

/*.status-box-main-part:first-child .status-value,*/
.status-box-state .status-value
{
    padding-top: 0px;
}

.status-box-state .ui-first-child .status-value {
    margin-left: 0px;
}

ul.status-box-state li:first-child .status-title ,
ul.status-box-state .status-value {
    display:inline;
}

ul.status-box-state h5 {
    margin:0;
}

.ui-block-x {
    /*block for ui-grid-?  that has the same width as its content, thk*/
    width:auto !important;
    float:left;
}


.sub-content-title
{
	width: auto;
	font-family: Arial, Helvetica, sans-serif;
	font-size:14px;
	font-weight:100;
	color:rgb(121,121,124);
/*
	float:left;
    */
	display:block;
	padding-top:16px;
	padding-left: 15px;
}

.input_field_centered
{
	width: 80%;     /* 360px; */
	height:auto;
	text-align:center;
	margin:auto;
}

.link_centered_grey
{
	width: auto;
	/* font-family: Arial, Helvetica, sans-serif; */
	font-size:18px;
	font-weight:100;
	color:rgb(121,121,124);
	display:block;
	padding-left: 10px;
	margin-top: 20px;
	margin-bottom: 20px;
	/* text-decoration:underline; */
}

.screen-boiler-container {
    width:100%; 
    height:320px; 
	background-image:url(../../images/boiler.png);
	background-repeat: no-repeat;
	background-size: 150px Auto;
	background-position: 20px 20px;
}

.screen-boiler-right
{
    float:right;
	width: 50%; /* 360px */
	text-align:center;
	vertical-align:middle;
	padding-top: 80px;
}

.screen-boiler-right .item-name
{
    color: #000000;
    display: block;
    font-size: 18px;
    font-weight: bold;
    padding-top: 6px;
    width: auto;
}

.screen-boiler-right .item-value
{
	color:rgb(2,84,45);
    display: block;
    font-size: 18px;
    font-weight: bold;
    padding-top: 6px;
    width: auto;
}

.screen-boiler-container .boiler_temp
{
    color: #000000;
	width:50%;
	text-align:left;
	display:block;	
	padding-left:58px;
	padding-top:80px;
}


.screen-boiler-container .boiler_temp h7 {
    
    display: block;
    font-size: 26px;
    font-weight: bold;
    padding-top: 6px;
    width: auto;
}

.screen-boiler-container .boiler_temp h8 {
    display: block;
    font-size: 16px;
    font-weight: bold;
    width: auto;
}

.screen-boiler-container .boiler_temp span.sub {
    margin-right:-0.3em;
    /*position:relative;
    bottom:-0.3em;*/
    font-size:75%;
}

.screen-boiler-container .boiler_temp span.upper {
    margin-right:-0.25em;
}

.mTANStateMessage {
    text-align:right;
    padding-right:10px;
    display:block;
}

.measurement-title 
{
	/* margin-top: 0.5em; */
	margin-bottom: 0.5em;
	padding: 0.5em;
	font-size:1.2em;
	text-align:center;
	background-color: White;
    border-radius: 0.5em;
    border:0px;

}



.charting-page .graph-title
{
	/* margin-top: 0.5em; */
	margin-bottom: 0.5em;
	padding: 0.2em 0;
	font-size:1.4em;
	text-align:center;
	background-color: White;
    border-radius: 0.5em;
    border:0px;
}

.charting-page .graph-title .ui-btn
{
    margin-top: 0;
    margin-bottom: 0;
}

.charting-page .graph-title .ui-slider-switch {
    width:4em;
}

.charting-page .measurement-title 
{
	/* margin-top: 0.5em; */
	margin-bottom: 0.5em;
	padding: 0.5em;
	font-size:1.4em;
	text-align:center;
	background-color: White;
    border-radius: 0.5em;
    border:0px;

}

.charting-page .rwButtonContainer .browse_interval_container {
    text-align: right;
}

.charting-page .browse_range {
    text-align:left;
}

.charting-page .rwButtonContainer .browse_interval_container > * {
    text-align:right;
    display:inline;
}

.charting-page .browse_interval .curRange {
    background: none repeat scroll 0 0 transparent;
    border-color: transparent;
    cursor: auto;
    font-weight: bold;
    padding: 0.8em;
}

.charting-page .browse_range > * {
    margin-left:5px;
}

.charting-page .browse_interval > * {
    margin-right:5px;
}

.charting-page .browse_interval .alone {
    margin-left:10px;
    margin-right:10px;
}

.charting-page .browse_range .ui-radio {
    border:0;
}

.charting-page .graph-title > .ui-btn {    
    position:absolute;
    right:20px;
    
}


.charting-page .chart-autoscale-area label.ui-slider {
    width:auto;
}

.charting-page .graph-title > div,
.charting-page .graph-title .ui-field-contain {
    margin:0;
}

.charting-page .graph-title .ui-field-contain {
    padding:0;
}

.charting-page .graph-title.ui-grid-c > .ui-block-a {
    width:20%;
}

.charting-page .graph-title.ui-grid-c > .ui-block-b {
    width:65%;
}

.charting-page .graph-title.ui-grid-c > .ui-block-c {
    width:10%;
}

.charting-page .graph-title.ui-grid-c > .ui-block-d {
    width:5%;
}

.charting-page .graph-title.ui-grid-c > .ui-block-d > * {
    float:right; /*align all content on the right side*/
}

.charting-page .chart-autoscale-area {
    /*margin-top: 0.5em;*/
    text-align: left;
    padding-left: 5px !important;
}

.charting-page .chart-autoscale-area > div {
    margin-bottom: -5px !important; 
}


.charting-page .seriesLegend .action {
    visibility:hidden; /*do not show the hide/show check-sign in the seriesLegend, thk+wb 05.05.2017 F046 */
}

.ui-grid-b.uix-middle {
    display:table;
    width:100%;
}

.ui-grid-b.uix-middle .ui-block-a,
.ui-grid-b.uix-middle .ui-block-b,
.ui-grid-b.uix-middle .ui-block-c {
    display:table-cell;
    vertical-align:middle;
    float:none;
}

/*
.screen-date
{
	width: 100%; 
	height: 49px;
	text-align:center;
    border-top:4px solid white;
    border-bottom:4px solid white;
}
*/

.screen-date-container {
    width:100%; 
    font-size:18px;
	font-weight:100;
	color:rgb(2,84,45);
	padding:9px 0;
    border-bottom:5px;
    border-bottom-color :white;
    border-bottom-style:solid;
}

.screen-date-container span {
    vertical-align:middle;
}

.screen-date-container span.ui-icon {
    display:inline-block;
}

.screen-date-container .screen-date-val {
    padding-left:10px;
    display:block;
    height:1.3em;
    overflow:hidden;
}

.screen-date-right
{
    float:right;
	/*width: 6em;*/ /*100px;*/ /* 360px */
	background-repeat: no-repeat;
    /*background-position:1% 50%;*/
	text-align:center;
   	margin-top:-4px;
    padding-right:3px;
    white-space:nowrap;
}

/*Heating Area temperature Widget*/

.measurand-grouped-values-page .ui-content {
    padding:0px;
}

.measurand-grouped-values-page .control-container {
    text-align:center;
    margin:0 auto;
    width:320px;
    height:260px;
    clear:both;
    padding-top:20px;
    background-size:320px auto;
	background-image:url(../../images/widget_background.png);
    background-color:rgb(227,232,235);
	background-repeat:no-repeat;
}

.measurand-grouped-values-page .widget_gauge
{
	width:320px;
	height:196px;
    margin-bottom:-215px;
	padding-top: 20px;
    text-align: center;
    
}

.measurand-grouped-values-page .widget_gauge svg
{
	z-index:10;
	top:-60px !important;

}

.measurand-grouped-values-page .widget_gauge text
{
	display:none;
}

.measurand-grouped-values-page .widget_text {
    height: 200px;
    width: 320px;
}

.measurand-grouped-values-page .widget_text svg
{
    top:-50px !important;
	/*position:absolute;*/
}

.measurand-grouped-values-page .widget_text svg text
{
	z-index:99;
}

.measurand-grouped-values-page .widget_text path
{
	visibility :hidden;
}


.measurand-grouped-values-page .actual_temp
{
	width:320px;
	text-align:center;
	display:block;	
    margin-top: -90px;
}

.measurand-grouped-values-page .actual_temp h7 {
    color: #BEC3C7;
    display: block;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 24px;
    font-weight: bold;
    padding-top: 6px;
    width: auto;
}

.measurand-grouped-values-page .actual_temp h8 {
    color: #BEC3C7;
    display: block;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 12px;
    font-weight: bold;
    width: auto;
}

.measurand-grouped-values-page .menue_controls {
    height: 70px;
    margin-top: 20px;
    width: 320px;
    margin-bottom:20px;
}

.measurand-grouped-values-page .menue_controls img {
    -moz-user-select: none;
    /*margin-left: 5px;*/
    margin-right: 120px;
}

.measurand-grouped-values-page .ui-submit {
    margin:auto 20px;
}

.chart_area {
    background-color: White;
    -moz-border-radius: 0.5em;
    -webkit-border-radius: 0.5em;
    border-radius: 0.5em;
    height: 450px;
}

/*COMMON VALUES*/

.lastvalid-container {
    display:none;
}

.lastvalid-container.lastvalid-show {
    display:block;
}

.measurandstate-invalid.realtimeValue,
.measurandstate-defect.realtimeValue,
.ui-page.notRealtime .realtimeValue,
.ui-page.notRealtime .realtimeValue span.ui-slider-label
  {
    color:blue;
    text-decoration:line-through;
}


.measurandstate-defect.realtimeValue
  {
    color:blue;
    text-decoration:line-through;
    font-style:italic;
}

.measurandstate-missing.realtimeValue {
    color:red;
}

.measurandstate-invalid label {
    color:inherit !important;
    text-decoration:none;
}

.measurandstate-limitfailure {
    /* for further use, will be activated, when productive system sends actual limits*/
    /*
    color: red;
    */
    color: black;
}

.measurandstate-valid {
    color:black;
}


.ui-li-value, .ui-li-switch
 { 
	position: absolute; 
	font-weight: bold; 
	padding: .2em .5em; 
	top: 50%; 
	margin-top: -.9em; 
	right: 10px; 
}

.ui-li-value.first-value {
	right: unset;
    left:17em; 
}

.ui-li-switch
{
	margin-top: -28px;
	/*right: 20px;*/
}

div.ui-li-datebox.ui-li-value {
    /*the datebox is too high to be centered using 50%*/
    top:30%;
}

div.ui-li-textbox.ui-li-value {
    /*the textbox is too high to be centered using 50%*/
    top:30%;
}


div.ui-li-datebox div.ui-input-text input {
    width:5em;
}

div.ui-li-spinbox div.ui-input-text input {
    width:3em;
}

div.ui-li-textbox div.ui-input-text input {
    width:9em;
}

div.ui-li-linkicon.ui-li-value {
    /*move the image a bit up so that it is aligned in the middle of the measurand*/
    margin-top:-20px;
}

div.ui-controlgroup-horizontal div.ui-input-text {
    margin:0;
    margin-right:10px;
}

.required {
  font-weight:bold;
}

.ui-body-b, .ui-overlay-b {
    text-shadow:none;

}

.ui-body-a, .ui-overlay-a, .ui-btn-active {
    text-shadow:none;
    /*background:#E3E8EB;*/ /*TODO: write this value to custom.css*/
}

div.ui-popup-container[id$='_ContextMenuPanel-popup'] {
    right: 0 !important;
    left: auto !important;
    top: 48px !important;
    width:100%;
}

.ContextMenuPanel {
    /*top: 0px;*/
    width: 95%;
    
    border: 2px solid #FFF;
    /*
    border-right: none;
    background: rgba(0,0,0,.5);
    */
    margin: 0 auto;
}

.ContextMenuPanel_Tablet h2 {
    margin-top: -6px;
    text-align: center;
    /* visibility:hidden; */
}

.ui-page-panel .ui-panel-content-wrap {
    /*use this css only if panel is active*/
    z-index:auto !important; /*Overlays are not displayed on Android Browser if this has a z-index*/

    /*try workaround https://github.com/jquery/jquery-mobile/issues/6455 */
}



div.ui-page[data-close-btn="none"] .ui-header .ui-title {
    margin-left:5px; /*no backbutton */
    margin-right:35px; /*close button*/
}

/*Input forms*/

/*style the placeholder color*/
::-webkit-input-placeholder {
    color:#888 !important;
    opacity:1;
}
:-moz-placeholder {
    color:#888 !important;
    opacity:1;
}
::-moz-placeholder {
    color:#888 !important;
    opacity:1;
}
:-ms-input-placeholder {
    color:#888 !important;
    opacity:1;
}

.placeholder {
    color:#888 !important;
    opacity:1;
}


/* Custom Icons*/

label.ratingicon .ui-btn-text,
div.ratingicon
{
    display: inline-block;
    line-height: 32px;
    /*hide label text BEGIN*/
    color:rgba(0,0,0,0);
    text-shadow:none;
    /*hide labeltext end*/
    height:32px;
    width:32px;
    background-image: url('../../images/smileys32.png');
	background-repeat: no-repeat;
}

label.ratingicon.sehrgut .ui-btn-text,
div.ratingicon.sehrgut
{
    background-position:-0 50%;
}

label.ratingicon.gefaellt .ui-btn-text,
div.ratingicon.gefaellt {
    background-position:-70px 50%;
}

label.ratingicon.naja .ui-btn-text,
div.ratingicon.naja {
    background-position:-106px 50%;
}

label.ratingicon.none .ui-btn-text,
div.ratingicon.none {
    background-image:none;
}

.ui-icon32 .ui-icon,
.ui-icon32.ui-icon {
    height:32px;
    width:32px;
}

.ui-icon32 .ui-btn-inner > .ui-icon {
    margin-top:-16px;
    top:50%;
}

.ui-btn-icon32 > .ui-btn-inner > .ui-icon
{
     margin-top: 0px;
     left:0px;
     margin-left:0px;
}

.ui-header .ui-btn-icon32 {
    top:3px;
}

.ui-header .ui-btn-icon-notext > .ui-btn-inner 
{
    padding-left:0px;
    border-top-width:0px;
}

.ui-icon-delete
{
    /*the custom icons have a size of 16x16*/
    background-position:50%;
    background-size: 18px 18px; /*not supported by iPad1 (old safari)*/
    height:18px; /*16+2*/
    width:18px; /*16+2*/
}

.ui-icon-clock {
    background-image:url(../../images/Zeit_32x32.png);
    background-size: 32px 32px; /*not supported by iPad1 (old safari)*/
    background-color:transparent;
}

.ui-header .ui-btn-icon32 .ui-icon-grid,
.ui-header .ui-btn-icon32 .ui-icon-arrow-l,
.ui-listview .ui-btn-inner .ui-icon-arrow-r,
.ui-btn-icon32 .ui-icon-delete,
.ui-btn-icon32 .ui-icon-gear
{
    /*the custom icons have a size of 16x16*/
    background-position:50%;
    background-size: 32px 32px; /*not supported by iPad1 (old safari)*/
    height:32px; /*32+2*/
    width:32px; /*32+2*/
}

.ui-btn-icon32.ui-btn-icon-notext {
    height:32px; /*32 + 2*/
    width:32px; /*32 + 2*/
}

.ui-btn-icon32.ui-btn-icon-notext.ui-btn-corner-all {
    -moz-border-radius: 0em;
    -webkit-border-radius: 0em;
    border-radius: 0em; /*32px icons should never have rouded borders and shadows*/
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.ui-btn-icon32.ui-btn {
    /*32px icons should never have rouded borders and shadows*/
    -moz-border-radius: 0em;
    -webkit-border-radius: 0em;
    border-radius: 0em;
    background: none;
    border: 0;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.ui-header a[data-rel='back'] .ui-icon-arrow-l
{
    /*custom default back button icon*/
	background-image: url("../../images/back_32x32.png");
    background-color:transparent;
    
}

.ui-header .ui-icon-grid {
    /*custom menu item*/
    background-image: url("../../images/menu_32x32.png");
    background-color:transparent;
}

.ui-icon-delete {
    background-image: url("../../images/close_32x32.png");
    background-color:transparent;
}

.ui-icon-gear {
    background-image: url("../../images/config_32x32.png");
    background-color:transparent;
}

.ui-icon-delete.ui-icon-shadow {
    box-shadow:none; /*no white circle around the icon*/
}

.ui-icon32 .ui-li-has-icon .ui-btn-inner a.ui-link-inherit,
.ui-icon32 .ui-li-has-icon.ui-li-static {
    padding-left:50px;
}

/* Styles for validation helpers
-----------------------------------------------------------*/
.field-validation-error {
    color: #ff0000;
    display: block; /*show message below the input field*/
}

.field-validation-valid {
    display: none;
}

.input-validation-error {
    /* border: 1px solid #ff0000; */
    background-color:#ffeeee;
}

.validation-summary-errors {
    font-weight: bold;
    color: #ff0000;
}

.validation-summary-errors ul {
    list-style-type:none;
    padding:0;

}

.validation-summary-valid {
    display: none;
}

/*Flash Message Popup*/

#FlashmessagePanel {
    width: 100%;
    border: none;
    top: 20%;
    height:auto;
    overflow:visible;
    z-index:1999;
}

.ui-page-panel #FlashmessagePanel {
       z-index:auto;  /*z-index and position:absolute and position:fixed do not work on ICS 4.0, set auto is a workaround*/
       /*try workaround https://github.com/jquery/jquery-mobile/issues/6455 */
}

.ui-page-panel #FlashmessagePanel * {
  z-index:2000; /*set z-index of all items in the FlashmessagePanel because the FlashmessagePanel itself has no useful z-index*/
  /*try workaround https://github.com/jquery/jquery-mobile/issues/6455 */
}

#FlashmessagePanel.ui-dialog {
    min-height:0px !important; /*do not show vertical-scrollbar when message is displayed*/
}

#FlashmessagePanel .ui-dialog-contain {
   margin:0 auto; /*centered popup*/
   width:80%;
   max-width:initial;
   display:block;
}

#FlashmessagePanel .ui-btn-right {
    position:absolute;
    right:-3px;
    top:-3px;
    z-index:1201; /*show close button in front of all other content*/
}

#FlashmessagePanel ul.ui-listview {
    border: 1px solid black;
}

.flasherrormessageitem{
	min-height: 40px !important;
}
  
.flashinfomessageitem {
	min-height: 40px !important;
	padding-right: 40px !important;
}

.flashmessage .ui-li-desc {
    /*display bigger message text*/
    font-size: 1.2em;
    margin: 0px;

    /*show whole message on small screen too*/
      white-space:normal;
      text-overflow:initial;
}

.flashmessage .ui-li-static {
    border: none; /*don't show green border for red error message*/
}

.flasherrormessage .ui-li-static,
.flashinfomessage .ui-li-static {
    /*errormessage has red background*/
    background-color:#FFD73E;
}

orange-gradient-background {
    background-image: -webkit-gradient(linear, left top, left bottom, from( #F9B700 /*{a-bar-background-start}*/), to( #F9B700 /*{a-bar-background-end}*/)); /* Saf4+, Chrome */
    background-image: -webkit-linear-gradient( #FFD73E /*{a-bar-background-start}*/, #F9B700 /*{a-bar-background-end}*/); /* Chrome 10+, Saf5.1+ */
    background-image:    -moz-linear-gradient( #FFD73E /*{a-bar-background-start}*/, #F9B700 /*{a-bar-background-end}*/); /* FF3.6 */
    background-image:     -ms-linear-gradient( #FFD73E /*{a-bar-background-start}*/, #F9B700 /*{a-bar-background-end}*/); /* IE10 */
    background-image:      -o-linear-gradient( #FFD73E /*{a-bar-background-start}*/, #F9B700 /*{a-bar-background-end}*/); /* Opera 11.10+ */
    background-image:         linear-gradient( #FFD73E /*{a-bar-background-start}*/, #F9B700 /*{a-bar-background-end}*/);
}


/*Show previous page when displaying dialog*/
                /*TODO add explicit support for IE, firefox */
/*Source: http://tqcblog.com/2012/04/19/transparent-jquery-mobile-dialogs/*/

.ui-dialog-background {
    opacity: 0.2;
    display: block !important;
    -webkit-transition: opacity 0.5s ease-in;
}

.ui-dialog-background.pop.in {
    opacity: 1;
    -webkit-transition: opacity 0.5s ease-in;
} 

.ui-dialog {
    min-height: 99% !important; /*do not set to 100% because then a vertical-scrollbar appears always, thk*/
    background: transparent !important;
}

.ui-dialog.centered {
    text-align:center;
}

.ui-dialog.centered .ui-btn-inner
{
     min-width:120px;
}


.ui-dialog-contain {
    padding:10px;
}

.ui-dialog.ui-page-active {
     z-index:100; /*put dialog in front of the page*/
}

/*Custom Dialogs*/

.ui-dialog-big .ui-dialog-contain {
    margin-top:15px;
    max-width:800px;
}

#yesnodialog .dialogmsg {
     margin:5px auto 15px auto;
}

/*SplitButton for Plant-Administration */

.split-custom-wrapper {
    /* position wrapper on the right of the listview-li */
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
}
.split-custom-button {
    /*button stays on the right side of the listview-li*/
    float: right;   /* allow multiple links stacked on the right */
    height: 100%;
    margin:0;
    min-width:3em;
    /* remove boxshadow and border */
    border:none;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

li:last-child .split-custom-button {
    border-bottom-right-radius:0.5em;
}

li:first-child .split-custom-button {
    border-top-right-radius:0.5em;
}

.split-custom-button .ui-btn-inner {
    display:inline; /*allow centering content*/
    padding: 0;
}

.ui-li-has-alt.alt95 .ui-btn-inner a.ui-link-inherit {
    padding-right:95px;
}

.split-custom-button .ui-btn-text {
  /*use tables to center content*/
  display:table;
  width:100%;
  height:100%;
}

.split-custom-button .ui-btn-text div.centerer {
    /*center content that is 48px height
        center using relative position does not work 
        with some mobile browsers (android 4.1 browser)
        */
/*    top:50%;
    position:relative;
    left:0px;
    height:48px;
    width:48px;
    margin-top:-24px;
*/
  /*use tables to center content*/
  display:table-cell;
  vertical-align:middle;
}

/*
.split-custom-button input {
    display:block;
}
*/

/*collapseable in popups*/

.ui-popup .ui-collapsible-heading .ui-btn-inner {
    text-overflow: initial; /*do not hide the last characters of the headline of a collapseable in a popup
                              if the headline-text is only a bit longer than all other text lines*/
}

/*response measurement view*/
@media all and (min-width: 961px), all and (orientation: landscape) 
{
	#measurands {
      width: 50%;
      float: left;
      margin-right: 2%;
    }
    #measurement {
      width: 48%;
      float: left;
    }
}
@media all and (max-width: 960px), all and (orientation: portrait)
{
    #measurands{
      width: 100%;
      float:none;
    }
    #measurement 
    {
      width: 100%;
      float:none;
    }
  }


/* responsive columnchooser
    * use for listing registration codes
*/

/*
.custom-responsive-table.ui-table-reflow{
    display:none;
}*/

.custom-responsive-table.ui-table-columntoggle{
    display:none;
}

.ui-table-columntoggle-btn {
        display:none;
}

/*
@media all ( min-width: 480px ) {
    .custom-responsive-table.ui-table-reflow{
        display:table;
    }

	/* Show the table header rows and set all cells to display: table-cell * / 
	.custom-responsive-table td,
	.custom-responsive-table th,
	.custom-responsive-table tbody th,
	.custom-responsive-table tbody td,
	.custom-responsive-table thead td,
	.custom-responsive-table thead th {
		display: table-cell;
		margin: 0;
	}
	/* Hide the labels in each cell * / 
	.custom-responsive-table td .ui-table-cell-label,
	.custom-responsive-table th .ui-table-cell-label { 
		display: none;
	}
}
*/

@media all and  (min-width: 801px)
{

    .ui-table-columntoggle-btn {
        display:inherit;
    }

    .custom-responsive-table.ui-table-columntoggle{
        display:table;
    }

    .custom-responsive-table.ui-table-reflow{
        display:none;
    }

  .custom-responsive-table th.ui-table-priority-1,
  .custom-responsive-table td.ui-table-priority-1
  {
    display: table-cell;
  }
  .custom-responsive-table th.ui-table-priority-2,
  .custom-responsive-table td.ui-table-priority-2,
  .custom-responsive-table th.ui-table-priority-3,
  .custom-responsive-table td.ui-table-priority-3,
  .custom-responsive-table th.ui-table-priority-4,
  .custom-responsive-table td.ui-table-priority-4
  {
    display: none;
  }
}

/*
@media all and (min-width: 641px)
{

    .ui-table-columntoggle-btn {
        display:inherit;
    }

    .custom-responsive-table.ui-table-columntoggle{
        display:table;
    }

    .custom-responsive-table.ui-table-reflow{
        display:none;
    }

  .custom-responsive-table th.ui-table-priority-1,
  .custom-responsive-table td.ui-table-priority-1
  {
    display: table-cell;
  }
  .custom-responsive-table th.ui-table-priority-2,
  .custom-responsive-table td.ui-table-priority-2,
  .custom-responsive-table th.ui-table-priority-3,
  .custom-responsive-table td.ui-table-priority-3,
  .custom-responsive-table th.ui-table-priority-4,
  .custom-responsive-table td.ui-table-priority-4
  {
    display: none;
  }
}

/*
@media all and (min-width: 641px) {
  .custom-responsive-table th.ui-table-priority-1,
  .custom-responsive-table td.ui-table-priority-1,
  .custom-responsive-table th.ui-table-priority-2,
  .custom-responsive-table td.ui-table-priority-2
  {
    display: table-cell;
  }
  .custom-responsive-table th.ui-table-priority-3,
  .custom-responsive-table td.ui-table-priority-3,
  .custom-responsive-table th.ui-table-priority-4,
  .custom-responsive-table td.ui-table-priority-4
  {
    display: none;
  }
}
@media all and (min-width: 801px) {
  .custom-responsive-table th.ui-table-priority-1,
  .custom-responsive-table td.ui-table-priority-1,
  .custom-responsive-table th.ui-table-priority-2,
  .custom-responsive-table td.ui-table-priority-2,
  .custom-responsive-table th.ui-table-priority-3,
  .custom-responsive-table td.ui-table-priority-3
  {
    display: table-cell;
  }
  .custom-responsive-table th.ui-table-priority-4,
  .custom-responsive-table td.ui-table-priority-4
  {
    display: none;
  }
}

*/

@media all and (min-width: 1025px) {
  .custom-responsive-table th.ui-table-priority-1,
  .custom-responsive-table td.ui-table-priority-1,
  .custom-responsive-table th.ui-table-priority-2,
  .custom-responsive-table td.ui-table-priority-2,
  .custom-responsive-table th.ui-table-priority-3,
  .custom-responsive-table td.ui-table-priority-3
  {
    display: table-cell;
  }
  .custom-responsive-table th.ui-table-priority-4,
  .custom-responsive-table td.ui-table-priority-4
  {
    display: none;
  }
}

@media all and (min-width: 1281px) {
  .custom-responsive-table th.ui-table-priority-1,
  .custom-responsive-table td.ui-table-priority-1,
  .custom-responsive-table th.ui-table-priority-2,
  .custom-responsive-table td.ui-table-priority-2,
  .custom-responsive-table th.ui-table-priority-3,
  .custom-responsive-table td.ui-table-priority-3,
  .custom-responsive-table th.ui-table-priority-4,
  .custom-responsive-table td.ui-table-priority-4
  {
    display: table-cell;
  }
}

/* Manually hidden */ 
.custom-responsive-table th.ui-table-cell-hidden,
.custom-responsive-table td.ui-table-cell-hidden {
	display: none;
}

/* Manually shown */
.custom-responsive-table th.ui-table-cell-visible,
.custom-responsive-table td.ui-table-cell-visible {
	display: table-cell;
}


/* REQUIRED CSS: change your reflow breakpoint here (35em below) */
@media all and (max-width: 35em) {

  /* uncomment out the line below if you don't want the sortable headers to show */
  table.ui-table-reflow2 thead { display: none; }

  /* css for reflow & reflow2 widgets */
  .tablesorter.ui-table-reflow2 td,
  .tablesorter.ui-table-reflow2 th {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    float: right;
    /* if not using the stickyHeaders widget (not the css3 version)
     * the "!important" flag, and "height: auto" can be removed */
    width: 100% !important;
    height: auto !important;
    max-width:unset !important;
  }


  /* reflow2 widget only */
  table.tablesorter.ui-table-reflow2 .ui-table-cell-label.ui-table-cell-label-top {
    display: block;
    padding: .4em 0;
    margin: .4em 0;
    text-transform: uppercase;
    font-size: .9em;
    font-weight: 400;
  }
  table.tablesorter.ui-table-reflow2 .ui-table-cell-label {
    padding: .4em;
    min-width: 30%;
    display: inline-block;
    margin: -.4em 1em -.4em -.4em;
  }

  table.tablesorter.ui-table-reflow2 th.ui-table-reflow2-ignore {
      display:none; /*do not show the header cell in small table mode*/
  }

} /* end media query */

/* reflow2 widget */
.tablesorter.ui-table-reflow2 .ui-table-cell-label {
  display: none;
}


/*the listicon has a size of 32x32 pixel*/
.ui-listview .ui-li-icon32
 {
    max-height: 32px;
    max-width: 32px;
    top: 0.5em;
}

/*the listicon has a size of 48x48 pixel*/
.ui-listview .ui-li-icon48 {
    max-height: 48px;
    max-width: 48px;
    top: 0.05em;
}

/*Style the context menu*/

.contextmenulist li.ui-li {
    padding: 5px;
    padding-top: 0px;
    padding-bottom: 0px;
    border: 0px;
}

.contextmenulist li.ui-li .ui-btn-inner {
    border:0px;
    border-bottom:1px solid black;
}

.contextmenulist li.ui-li.ui-last-child .ui-btn-inner {
    border-bottom:0px;
}

.contextmenulist.ui-listview .ui-li-icon {
    left:5px; /*the icon be more on the left*/
}

.contextmenulist .ui-btn-inner {
    font-size: 1em; /*a smaller text for both icons*/
}

.contextmenulist .ui-btn-inner a.ui-link-inherit {
    padding-top:0.9em;
    padding-bottom:0.9em;
    padding-left: 50px; /*ui-li-iconXX + 13*/ /*space between left icon and text*/ /*no icons for context menu links*/
    /*min-height: 1.5em; /*affects the height of the menuitem*/
}
/*
.contextmenulist .ui-icon-true,
*/
.ui-listview .ui-btn-inner .ui-icon-arrow-r
 {
    /*custom menu item*/
    background-image: url("../../images/link_32x32.png");
    background-color:transparent;
}


@media (min-width: 47em) {
    /*
        keep the full content view on smaller displays (default: min-width:55em)
    */

    /*context menu panel for tablets */
	.ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-display-push.ui-panel-content-fixed-toolbar-position-left,
	.ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-display-reveal.ui-panel-content-fixed-toolbar-position-left,
	.ui-responsive-panel.ui-page-panel-open .ui-panel-content-wrap-display-push.ui-panel-content-wrap-position-left,
	.ui-responsive-panel.ui-page-panel-open .ui-panel-content-wrap-display-reveal.ui-panel-content-wrap-position-left {
		margin-right: 17em;
	}
	.ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-display-push.ui-panel-content-fixed-toolbar-position-right,
	.ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-display-reveal.ui-panel-content-fixed-toolbar-position-right,
	.ui-responsive-panel.ui-page-panel-open .ui-panel-content-wrap-display-push.ui-panel-content-wrap-position-right,
	.ui-responsive-panel.ui-page-panel-open .ui-panel-content-wrap-display-reveal.ui-panel-content-wrap-position-right {
		margin-left: 17em;
	}
	.ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-display-push,
	.ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-display-reveal {
		width: auto;	
	}
	.ui-responsive-panel .ui-panel-dismiss-display-push {
		display: none;
	}	
}

/*Style pages xpages*/

@media all and (min-width: 350px) {
    .alarms-page #intervalButtons {
        min-width:330px;
    }
}

.alarms-page .alarmResetDenyReason {
    font-weight:bold;
    text-align:center;
    padding:0.8em;
    border:1px solid #FFD73E;
    line-height:32px; /*message includes an .uix-icon*/
}




.alarms-page .alarmResetSuccess {
    font-weight:bold;
    text-align:center;
    border:1px solid #245338;
    padding:0.8em;
    line-height:32px; /*message includes an .uix-icon*/
}

.bge-replace-page .tanValue {
    font-size: 200%;
    margin-left: 1em;
    background: white;
}

.bge-replace-page p {
    margin:0px;
    font-size:120%;
}

.notification-dialog .notificationDate {
    text-align:right;
}

.notification-dialog .notificationText {
    padding:5px;
}

.notification-dialog .ui-li-count {
    font-size:80%;
    right:50px;
    top:1.5em;
}

.plantnote-list-page .Note-col {
    white-space: pre-line;
}

.plantnote-list-page thead tr th.LastModifiedOn-col {
    width: 5.5em;
    word-break: break-all;
}

.plantnote-list-page thead tr th.edit-col {
    width: 9em;
    word-break: break-all;
}

.plantnote-list-page thead tr th.Id-col,
.plantnote-list-page tbody tr td.Id-col {
    width: 2.5em;
    word-break: break-all;
}

@media all and (max-width: 35em) {

    .plantnote-list-page thead tr th.Id-col,
    .plantnote-list-page tbody tr td.Id-col {
        display: none; /*do not show the Id column on small devices*/
    }
}


.plantevent-list-page .currentMonth {
  text-align: center;
  display: block;
  font-size: 140%;
  padding: 0.5em;
}

.plantevent-list-page .dayPilotMaster {
    display:table;
    width:100%;
    table-layout:fixed;
}

.plantevent-list-page .dayPilotMaster > div:first-child{
    display:table-cell;
    width:10em;
}

.plantevent-list-page .dayPilotMaster > div:last-child {
    display:table-cell;
    float:none;
    width:unset;
}

.plantevent-list-page .dayPilotNavigatorContainer {
    vertical-align:top;
}

.plantevent-list-page .daypilot-pager .ui-block-a,
.plantevent-list-page .daypilot-pager .ui-block-c
 {
    width:20%;
}

.plantevent-list-page .daypilot-pager .ui-block-b
 {
    width:60%;
}

.plantevent-list-page .daypilot-pager .ui-btn-inner {
    text-overflow:unset;
}

@media all and (max-width: 35em) {

    /* 
        the month/year information need more space on small devices
    */

    
    .plantevent-list-page .daypilot-pager .ui-block-a,
    .plantevent-list-page .daypilot-pager .ui-block-c
     {
        width:30%;
     }
    

    .plantevent-list-page .daypilot-pager .ui-block-b {
        width:40%;
        word-spacing:5em; /*force month and year always be on separate lines*/
        font-size:90%;
    }
}


    


.feedback-index-page .ui-table-reflow td .ui-checkbox {
    top:1.5em;
}

.createdatapackageapproval-page .noPossibleGrantees {
    font-style:italic;
}

.usergroup-edit-page textarea,
.createdatapackageapproval-page textarea,
textarea.big
 {
    height:10em;
    
}

textarea.verybig
 {
    height:10em;
    height:50vh;
}

.manage-datapackages-page .inactive {
    text-decoration:line-through;
}

.manage-datapackages-page .inactive a {
    text-decoration:none;
}

.changepassword-page .passwordrules {
    text-decoration:underline;
}

.login-page .validation-summary-errors  {
    width:80%;
    margin:auto;
}

.manage-registration-codes-page .ui-table-columntoggle-btn,
.manage-datapackages-page .ui-table-columntoggle-btn,
.manage-usergroups-page .ui-table-columntoggle-btn,
.changelog-page .ui-table-columntoggle-btn,
.plantnote-list-page .ui-table-columntoggle-btn
{
  display:none; /*do not display the 'Columns...' Button */
} /*xColumns */


.manage-registration-codes-page td img {
    height: 14pt;
}

/*
.measurand-favorites-page .ui-content {
    / *padding-bottom:0px;* / /*setting bottom patting to 0 causes a veritical scrollbar in mobile view in Firefox, thk 2014-12-12 * / 
}
*/


.changelog-page .timerangeinfo {
    text-align:center;
    padding:10px;
}

.measurand-favorites-page h3 {
    margin-top:0.5em;
    padding-top:1em;
    margin-bottom:0.1em;
    
    color: #79797C;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 14px;
    font-weight: 100;
    padding-left: 4px;
    width: auto;

    clear:left;
}

.measurand-favorites-page h4{
    color: #000000;
    /*display: inline;
    float: left;
    */
    font-family: Arial,Helvetica,sans-serif;
    font-size: 16px;
    font-weight: bold;
    /*margin-left: 60px;
    padding-top: 20px;*/
    width: auto;
}

.measurand-favorites-page .ui-listview.measurand-favorites-list {
    margin:5px 0px -10px 0px;
}

.measurand-favorites-page .ui-listview.measurand-favorites-list li.ui-li,
.measurand-favorites-page .plant-info
 {
    margin:0px;
    margin-bottom:6px; /*thk warning: a too low value makes a vertial scrollbar visible*/
    border:3px solid rgb(215,220,224);
}

.measurand-favorites-page div.plant-info {
    margin:0px;
}

.measurand-favorites-page .plant-info .ui-listview {
    margin: 5px 0;
}

.measurand-favorites-page .ui-listview.measurand-favorites-list .ui-li {
    border-radius:4px;
}

.measurand-favorites-page .ui-listview.measurand-favorites-list .ui-li-thumb {
    left: 0.8em;
    margin-top: -16px;
    top: 50%;
}

.measurand-favorites-page .measurand-favorites-list.ui-icon32 .ui-btn-inner a.ui-link-inherit,
.measurand-favorites-page .measurand-favorites-list.ui-icon32 .ui-li-static,
.plant-info .ui-icon32 .ui-li .ui-btn-inner a.ui-link-inherit {
    padding:0.35em 55px 0.35em 60px; /*top right bottom left*/
}

div.plant-info .ui-icon32 .ui-li .ui-btn-inner a.ui-link-inherit {
    padding-top:0.1em;    
    padding-bottom:0.1em;
    padding-right:0;
}

.measurand-favorites-list .ui-li-value,
.plant-info .ui-li-aside {
    color: #000000;
    font-family: "Helvetica Rounded",Arial,Helvetica,sans-serif;
    
    /*Big fontsize for overview / Multivalue temperatures  see also [FONT-REF01] */
    /*
        font-size: 28px;
        font-weight: 400;
        margin: 2px 0 0;
        letter-spacing: -0.03em;
        */
        
        /* small font size or overview / multivalue temperatures  see also [FONT-REF01] */
    font-size: 16px;
    font-weight: bold;
    margin: 8px 0 0;
            

    overflow: hidden;
    -ms-text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    /* align the values on the right side so we have more space for the text */
    text-align: right;
    width: auto;
    padding-right: 5px;
}

ul.measurand-favorites-list .ui-li-value {
    right:45px;
    margin-top:-0.9em;
}

div.plant-info .ui-li-value {
    margin-top:-0.9em;
}

.plantlist-page.singleplant .ui-content  {

    /*
        xSinglePlant
        must be before the @media block, because the max-width is an other for small displays
    */
    max-width:25em;
    margin:0 auto;
}

@media all and (max-width:640px) {
    /*on small displays, the font size and padding between icon and text depends directly on the viewport-width (vw unit), thk 2014-12-12*/

    .measurand-favorites-page h4,
    .plantlist2 .plant-info h4 {
        font-size: 4vw;
    }

    .plantlist-page.singleplant .ui-content
     {
        max-width:100vw;
    }

    .measurand-favorites-list span.ui-li-value,
    .measurand-favorites-page div.plant-info span.ui-li-aside,
    .plantlist2 .plant-info span.ui-li-aside {
        /*Bigger Font:
          font-size:7vw
            */
        /* see also [FONT-REF01]  */
        font-size: 4vw;
    }

    .measurand-favorites-page .ui-listview.measurand-favorites-list .ui-li-thumb,
    .measurand-favorites-page .plant-info .ui-listview.ui-icon32 .ui-li-thumb,
    .plantlist2 .plant-info .ui-listview.ui-icon32 .ui-li-thumb {
        left: 2vw;
    }

    .measurand-favorites-page .measurand-favorites-list.ui-icon32 .ui-btn-inner a.ui-link-inherit,
    .measurand-favorites-page .measurand-favorites-list.ui-icon32 .ui-li-static,
    .measurand-favorites-page .plant-info .ui-listview .ui-li a.ui-link-inherit,
    .plantlist2 .plant-info .ui-listview .ui-li a.ui-link-inherit {
        padding-left:15vw;
    }

    /*
        SEE ALSO BELOW the section for max-width:480px

    */
}

.measurand-favorites-page .value-and-unit span.sub {
    margin-right:-0.3em;
    /*position:relative;
    bottom:-0.3em;*/
    font-size:75%;
}

/* //NOT USED
.measurand-favorites-page .value-and-unit sup {
    position:relative;
    top:0.2em;
}
    

.measurand-favorites-page .value-and-unit sup.nosub {
    margin-left:-0.4em;
}
*/

.manageviewitems-page .ui-header .ui-title {
    float: left;
    margin-left: 0;
    margin-right: 0;
    width: 100%;
}

.manageviewitems-page .ui-header h2.ui-title {
    margin-bottom: 0.1em;
    margin-top: -0.9em;
}

.manageviewitems-page .ui-header .uix-header-controls {
    float:left;
    margin-bottom:0;
    margin-top:0.5em;
}

.manageviewitems-page .ui-header .ui-field-contain label {
    margin-right:0;
    display:inline;
}

.manageviewitems-page .ui-header .uix-header-controls div.ui-slider {
    width: 8em;
}

.manageviewitems-page .ui-li.inactive {
    transition: max-height 1s ease 0s, border-width 0s ease 1s;
}

.manageviewitems-page .ui-li.inactive.grow {
    max-height: 200px;
}

/*
.manageviewitems-page .ui-li.inactive .ui-checkbox .ui-icon {
    / *margin-top: -3px; /*try to vertically middle the checkbox,thk * /
}
*/

.manageviewitems-page .ui-li.inactive label .ui-btn-text {
    opacity:0.6;
}

.manageviewitems-page .ui-li .ui-btn-text-extra {
    font-size: 12px;
    font-weight: normal;
    margin: 0 0 0 2em;
}

.manageviewitems-page .list-divider-equipmentname {
    padding-left: 2em;
}

.manageviewitems-page .ui-li-static {
    padding-top:0px;
    padding-bottom:3px;
}

.manageviewitems-page .measurandlist.blacklisteditor .ui-li-heading {
    margin-top:0;
    margin-bottom:0;
}

/*Style the main lists (plant, equipment, measurand) */

.plantlist .ui-li-has-thumb .ui-btn-inner a.ui-link-inherit,   .equipmentlist .ui-li-has-thumb .ui-btn-inner a.ui-link-inherit,
.plantlist .ui-li-has-thumb.ui-li-static,                      .equipmentlist .ui-li-has-thumb.ui-li-static
{ 
	min-height: 44px;  /*Thumbnail-height -20px */
	padding-left: 80px; /*Thumbnail-width +20px*/
}

.plantlist .ui-li-thumb,
.equipmentlist .ui-li-thumb
{
	max-height: 32px;
	max-width: 32px;
	margin-top: 16px !important;
	margin-left: 16px !important;
}

/* -- no different color, KWB 2017-09-22
.equipmentlist .equipment_note .ui-li {
    background-color:#F4DE75;
}
*/


/*  -- no different color, KWB 2017-09-22
.equipmentlist .equipment_event .ui-li {
   background-color:#02542d;
}


.equipmentlist .equipment_event .ui-li h2 {
    color:white;
}
*/


.plantlist .ui-li-aside
{
	width: 40px !important;
}

.measurandlist .sorted-item {
    border-left:10px double black;
}

ul.measurandlist:not(.blacklisteditor) li.trendable {
    background:#FDFFC0;
}


.plant-info {
    background-color: #FFFFFF;
    height: auto;
}

.plant-info .ui-icon32 .ui-li {
    /*the line must be at least as high as the icon, thk 2014-12-12 (lineheight can not depend on font-size of the content anymore) */
    min-height:32px;
}

.plant-info .screen_header {
    background-image: url("../../images/plantlist_header_bg.png");
    overflow: hidden;
    position: relative;
    text-align: center;
    width: 100%;
}

.plant-info .screen_header a.aside {
    top: 50%;
    margin-top: -12px; /*depends on height in .plant-info .screen_header img*/
}

.plant-info .screen_header img {
    /* background: none repeat scroll 0 0 white; */
    height: 24px;
    width: 24px;
}

.plant-info .h2 {
    text-align: center;
}

.plant-info h2, .plant-info h3 {
    /*color: #215F41;*/
    /*font-family: Arial,Helvetica,sans-serif;*/
    font-size: 17px;
    font-weight: bold;
    line-height: 19px;
    padding: 10px;
    width: auto;
    margin:0;
    /*float:left;*/ /*thk*/
}

div.plant-info h4 {
    padding:0px;
    margin: 0.5em 0 0.6em;
}

.plant-info a,
.plant-info .ui-link {
    text-decoration:none;
    font-weight:normal;
}

.plant-info .screen_header .uix-right {
    position:absolute;
    right:7px;
}

.plant-info .screen_header .uix-right2 {
    position:absolute;
    right:42px;
}

.plant-info .ui-listview span.error {
    color:red;
}

.plant-info .ui-listview.ui-icon32 .ui-li-thumb {
    margin-top: -16px;
    max-height: 32px;
    max-width: 32px;
    position: absolute;
    top: 50%;
}

/* show special equipments (Alarms, Notes, Events, ...) in the SinglePlant-View */

.plant-info .equipmentlist {
    margin-top:15px;
}

.plant-info .equipmentlist .ui-li-has-thumb .ui-btn-inner a.ui-link-inherit,
.plant-info .equipmentlist .ui-li-has-thumb.ui-li-static {
    padding-left:60px;
    min-height: 20px;
}

.plant-info .equipmentlist img.ui-li-thumb {
    margin-top:2px !important;
    margin-left:10px !important;
}

.plant-info .equipmentlist h2 {
    padding:0px;
}

/* show special equipments - END */

.plantlist2 .plant-info {
    margin: auto auto 4.5% 7%;
    box-shadow: 0 1px 2px 0 #999999;
}


.plantlist2 .ui-block-a .plant-info {
    margin-right:0;
}

.plantlist2 .ui-listview .ui-li-desc {
    margin-top:-0.2em;
    margin-bottom: -0.5em;
}

/*
.plantlist2 .ui-listview.ui-icon32 .ui-btn-inner a.ui-link-inherit,
.plantlist2 .ui-listview.ui-icon32 .ui-li-static {
    padding:0.6em 0 0.5em 52px; /*top right bottom left* /
}*/

.plantlist2.ui-grid-b .ui-block-a,
.plantlist2.ui-grid-b .ui-block-b,
.plantlist2.ui-grid-b .ui-block-c
{
	width: 32.5%;
}	

.plantlist2.ui-grid-a .ui-block-a,
.plantlist2.ui-grid-a .ui-block-b
{
	width: 48.5%;
}

@media (max-width : 1024px) {

    .plantlist2 .ui-block-a {
        clear:none;
    }

	.plantlist2.ui-grid-b .ui-block-a,
    .plantlist2.ui-grid-b .ui-block-b,
    .plantlist2.ui-grid-b .ui-block-c
	{
		width: 48.5%;
	}	
}

@media (max-width : 640px) {

	.plantlist2.ui-grid-b .ui-block-a,
    .plantlist2.ui-grid-b .ui-block-b,
    .plantlist2.ui-grid-b .ui-block-c
	{
		width: 97%;
		float: none;
	}

    .plantlist2 .plant-info {
        margin-left:3%;
    }

    .plantlist2.ui-grid-a .ui-block-a,
    .plantlist2.ui-grid-a .ui-block-b
	{
		width: 97%;
		float: none;
	}

    .plantlist2 .plant-info {
        margin-left:3%;
    }
}

/*xSinglePlant */

.plantlist-page.singleplant .plantlist2.ui-grid-a .ui-block-a,
.plantlist-page.singleplant .plantlist2.ui-grid-a .ui-block-b
{
    width:100%;
    float:none;
}

.plantlist-page.singleplant .plantlist2 .plant-info {
    margin-left:5px;
    margin-right:5px;
    margin-bottom:5px;

}
.plantlist-page.singleplant .plantlist2 .plant-info .screen_header img {
    /*hide plantstate icons in singleplant-mode, but show for the first module -> see below */
    display:none;
}
.plantlist-page.singleplant .plantlist2 .ui-block-a:first-child .plant-info .screen_header img {
    /*show the plant-state only for the first module */
    display:block;
}

.measurandlist .ui-field-contain .ui-rangeslider {
    max-width:100%;
}

.measurandlist .ui-field-contain div.ui-slider,
.measurandlist .ui-field-contain div.ui-rangeslider
 {
    /*width: 74%; /*size of the measurand slider, if bigger, sliderlabel and slider can not stay on the same line*/
    overflow: hidden;
    display:block;
    width:auto;
    padding-top: 1px;
}

.measurandlist .ui-li-static.ui-li-has-icon,
.measurandlist .ui-li.ui-btn.ui-li-has-icon a.ui-link-inherit {
    padding: 20px 0 20px 50px;
    /*height of listitem is defined with the padding value*/
}

.measurandlist .ui-li-icon32 {
  top:0.5em;
}

.measurandlist .ui-li-icon32.ui-li-thumb {
  top:50%;
  margin-top:-16px; /*half of height*/
}

.measurandlist .ui-li-heading {
    margin:0;
}

.measurandlist .ui-li-slider {
    min-height:3em; /*define a min-height so that two lines of measurand-name-text do make the next measurand force to float around*/
}

.measurandlist .measurandSliderContainer .ui-slider-input {
    margin-top:-16px;
    position:absolute;
    right:60px;
    top:50%;    
}

.measurandlist .ui-field-contain .ui-rangeslider .ui-rangeslider-sliders {
    width:auto;
    float:none;
    margin-left: 1em;
}

.measurandlist .measurandSliderCommonContainer .ui-slider-track
 {
    margin-right:120px;
    margin-left:1.5em;
}

.measurandlist .measurandRangeSliderContainer .ui-slider-input.ui-rangeslider-last {
    margin-top: -16px;
    position: absolute;
    right: 60px;
    top: 50%;
}

.measurandlist.blacklisteditor .ui-li-heading {
    margin:0.6em 0;
}

.measurandlist.blacklisteditor .ui-li-static {
    padding:0;
}


.measurandlist.blacklisteditor .ui-btn {
    margin:0;
    border:0;
}

.measurandlist.blacklisteditor li:not(.ui-first-child) .ui-btn-corner-all {
    border-top-left-radius:0;
    border-top-right-radius:0;
}

.measurandlist.blacklisteditor li:not(.ui-last-child) .ui-btn-corner-all {
    border-bottom-left-radius:0;
    border-bottom-right-radius:0;
}

.measurandlist .ui-li-static.ui-li-slider {
    padding-top:10px;
    padding-bottom:10px;
}

.measurandlist .measurandSliderContainer.ui-field-contain {
    border: 0 none;
    /*max-height:20px;*/
    height: auto;
    margin: 0;
    top: 50%;
    overflow:hidden; /* if overflow hidden, the big value displayer is not shown*/
    padding:0;
}


.measurandlist .ui-li-slider .ui-field-contain {
    border-width:0;
}

.measurandlist .ui-field-contain label.ui-slider {
    width: 180px;
}

.measurandlist label.ui-slider {
    float:left; /*must have exactly this selector to work*/
}

.measurandlist .ui-li-desc {
    margin-top: 0;
    margin-right: 10px;
    padding-right: 0.5em;
    /*text-align: right;*/
    content:" ";
}

.numbercomma-no.measurandSliderCommonContainer .ui-slider-track {
    margin-right: 8.5em;
}

.numbercomma-no input.ui-slider-input {
    width: 4.5em;
}

.numbercomma-no span.ui-li-value.first-value {
    left:17em; 
}

.numbercomma-one.measurandSliderCommonContainer .ui-slider-track {
    margin-right: 9em;
}

.numbercomma-one.measurandSliderCommonContainer .ui-rangeslider .ui-slider-track {
    margin-left: 2em;
}

.numbercomma-one input.ui-slider-input {
    width: 5em;
}

.numbercomma-one span.ui-li-value.first-value {
    left:17.5em; 
}

.numbercomma-two.measurandSliderCommonContainer .ui-slider-track {
    margin-right: 9.5em;
}

.numbercomma-two.measurandSliderCommonContainer .ui-rangeslider .ui-slider-track {
    margin-left: 2.5em;
}

.numbercomma-two input.ui-slider-input {
    width: 5.5em;
}

.numbercomma-two span.ui-li-value.first-value {
    left:18.0em; 
}

.numbercomma-three input.ui-slider-input {
    width: 6em;
}

.numbercomma-three.measurandSliderCommonContainer .ui-slider-track {
    margin-right: 10em;
}

.numbercomma-three.measurandSliderCommonContainer .ui-rangeslider .ui-slider-track {
    margin-left: 3em;
}

.numbercomma-three input.ui-slider-input {
    width: 6em;
}

.numbercomma-three span.ui-li-value.first-value {
    left:18.5em; 
}

@media (max-width: 480px) {
	.measurandlist label.ui-slider {
		float:none;
	}


    .measurandlist .ui-li-heading, .measurandlist .ui-li, .measurandlist label.ui-slider
      {
        font-size:12px; /*alter margin-top below too*/
    }

    .measurandlist .ui-li-heading, .measurandlist label.ui-slider
    {
        margin-top:0px; /*required because the text is not vertically middled automatically when the font-size is reduced*/
    }

    .measurandlist .ui-li-static.ui-li-has-icon
    {
        padding: 15px 0 15px 50px;
    }
   
    /*make text smaller and vertically-middle the text*/
    .equipmentlist .ui-li-heading {
       font-size:12px; 
       padding-top:0.5em;	
    }


    /*
        Adapt slider GUI for smartphone displays
        where the slider is below the measurand-name
    */

    .measurandlist .measurandSliderContainer .ui-slider-input {
        margin-top:-5px;
    }

    .measurandlist .measurandSliderCommonContainer .ui-slider-input,
    .measurandlist .measurandSliderCommonContainer .ui-slider-input.ui-rangeslider-last
     {
        right:40px;
    }

    .numbercomma-no.measurandSliderCommonContainer .ui-slider-track {
       margin-right: 10.5em;
   }

    .numbercomma-one.measurandSliderCommonContainer .ui-slider-track {
        margin-right: 11em;
   }

    .numbercomma-two.measurandSliderCommonContainer .ui-slider-track {
        margin-right: 11.5em;
    }

    .numbercomma-three.measurandSliderCommonContainer .ui-slider-track {
        margin-right: 12em;
    }   


    /*
        make range slider both inputs on the right side
    */

    .measurandlist .ui-field-contain .ui-rangeslider .ui-rangeslider-sliders {
        margin-left:0;
        margin-right:0;
    }

    .measurandlist .measurandRangeSliderContainer .ui-slider-input.ui-rangeslider-first {
        position:absolute;
        top:0px;
        right:40px;
    }

    .measurandlist span.ui-li-value.first-value {
        left:unset;
        right:10px;
        top:1.3em;
    }


    .measurandlist .measurandRangeSliderContainer .ui-slider-input.ui-rangeslider-last {
        position:absolute;
        top:5em;
        right:40px;
    }


    .measurandlist span.ui-li-value.last-value {
        top:6em;
    }

    .ui-li-value {
        top: unset;
    }
}

/*Style sub lists*/

.mTANContainer {
    background-color:lightgray;
}


.pager-nav .ui-block-a {
    width:10%!important;
}

.pager-nav a.ui-btn .ui-btn-inner {
    padding: 0.6em !important;
}

.pager-nav a.ui-btn {
    margin-left:1px;
    margin-right:1px;
}

/*
.pager-nav .mt-hidden {
    display:none;
}
*/

.pager-nav .ui-block-b {
    width:80% !important;
}
.pager-nav .ui-block-c {
    width:10%!important;
}

.pager-nav .ui-focus,
.pager-nav .ui-btn:focus {
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none ;
}

.sliderpager .list {
    width: 100%;
    overflow: hidden;
    /*overflow: hidden;
    margin-top:-15px;
    position:relative;
    top:-9999px;*/
}
.sliderpager .item {
    width:100%;
    /* 2015-06-18*/
    top:10px !important;
}


#console {
    position:absolute;
    bottom:0px;
    z-index:9999;
    right:0px;
    max-height:30%;
    overflow:scroll;
}

.createcodes_equipmentlist,
.createdatapackageapproval_datapackagelist,
.usergroup_leftblock
 {
    margin:0px !important;
}

.createcodes_equipmentlist .header span, .createcodes_plantlist h4,
.createdatapackageapproval_datapackagelist .header span, .createdatapackageapproval_datapackagelist h4,
.usergroup_leftblock .header span, .usergroup_leftblock h4
{
    margin-left:1em;
    
}
.createcodes_equipmentlist .header span,
.createdatapackageapproval_datapackagelist .header span,
.usergroup_leftblock .header span
 {
    display: block;
    padding: 5px 0px;
}

.createcodes_equipmentlist .header .ui-block-a,
.createdatapackageapproval_datapackagelist .header .ui-block-a,
.usergroup_leftblock .header .ui-block-a
 {
    font-size: 120%;
}

.createcodes_equipmentlist .ui-li.ui-first-child {
    border-top:none;
}

.createcodes_equipmentlist .ui-li-static.ui-li {
    padding:0.2em;
}

.createcodes_equipmentlist .ui-checkbox .ui-btn-inner {
    border-top:none;
}

.createcodes_equipmentlist .ui-field-contain {
    margin:0.2em 0;
    padding:0.1em;
}


.realtimeErrorPanel {
    display:none;
    border:3px solid red;
    padding:10px;
    font-size:1.5em;
    margin:5px;
    text-align:center;
}

.ui-page.notRealtime .realtimeErrorPanel {
    display:block;
}

/*Style Grids*/

.createcodes_main_grid > div {
    padding:7px;
    -webkit-border-radius: 10px;
	border-radius: 10px;
}

.createcodes_main_grid > .ui-block-b {
    position:relative;
    margin-left:2%;
    width:48%;
    /*background-color: #FFE78E; color is not part of corporate identity*/
}


/*Style Header and Footer */
.ui-header {
    text-shadow:none;
}

.ui-footer .userDetails {
    float:right;
    padding-right:20px;
    text-align:right;
}

/*Style responsive grids
   * e.g. CreateRegistrationCodes
    */
@media all and (max-width: 800px) {
	.responsive-stack-medium-device > .ui-block-a, 
	.responsive-stack-medium-device > .ui-block-b
	{ 
		width: 100%; 
		float:none; 

	}

    .responsive-stack-medium-device > div.ui-block-b {
        /*margin:auto !important;*/
        margin-top:2%;
        margin-left:0;
    }
}

@media all and (max-width: 400px) {
	.responsive-stack-medium-device2 > .ui-block-a, 
	.responsive-stack-medium-device2 > .ui-block-b
	{ 
		width: 100%; 
		float:none; 
	}

    .responsive-stack-medium-device2 > div.ui-block-b {
        /*margin:auto !important;*/
        margin-top:2%;
        margin-left:0;
    }
}


.uix-hidden {
    /*add this class to an element to hide it*/
    display:none !important;
}

.uix-hidden-nice {
    border-width: 0;
    max-height: 0;
    overflow: hidden;
}

img.uix-icon
 {
    /*add class to image that is included before the text*/
    vertical-align:middle;
    margin-right:0.5em;
}

.ui-field-contain .uix-input-note {
    /*label.width 20% + label.margin-right 2%*/
    margin-left:22%; 
}

@media (max-width:450px) {
    .ui-field-contain .uix-input-note {
        /*no margin when screen is too small*/
        margin-left: 0;
    }
}


.logging-result-overview {
    /* display:none; */
    border:0.2em solid;
    padding:0.5em;
}

.logging-result-ov-left {
    float: left;
}

.logging-result-ov-right {
    float: right;
}


.logging-item {
    font-weight: bold;
    font-size: 20px;
    padding-left: 5px;
    padding-right: 5px;
}

.logging-status {
    font-weight: bold;
    font-size: 28px;
    padding-left: 5px;
    padding-right: 5px;
}