/*
 * css for the yield expected monitoring views
 */


/* Extra Grouping Header styling ==============================================*/

/* li header element for extra titles (like grouping) */
.yield_expected_header {

	/* element extends behind the normal header view to use its border line for both */
	position: absolute;
	z-index: -100;

	/*background-color transparent */
	/*background-color: rgba(255,255,255,0);*/

	width: 100%;

	/* determine height and line-height so text is centered */
	height: 79px;
	line-height: 25px;

	color: #00539f; /* blue text color */

	margin-top: -4px; /* removes the standard list view margin so we start right below the selected list element */
}

/* left div for the normal plant stuff */
.yield_expected_header_infos {

	float: left; /* so the div starts on the left side and the other divs come behind this */

	/* width of the 2 info columns */
	width: 302px;

	height: 100%;
}

	/* text of grouped infos */
	.yield_expected_text_padding_info {
		padding-left: 36px; /* starts at same vertical point as the plant name below it */
	}

/* middle div for the normal yields */
.yield_expected_header_actual {

	/* so the div comes behind the first on (info div) */
	float: left;

	/* width of the 4 yield columns */
	width: 276px;

	height: 100%;

	/* border to have a boundary between this and the first div */
	border-left: 1px solid #d1d1d1;
}

	/* grouping header actual */
	.yield_expected_text_padding_actual {
		padding-left: 9px; /* starts at same vertical point as the today yield below it */
	}

/* right div for the prognosis */
.yield_expected_header_expected {

	float: right; /* float right because this should be right at the right border of the header li element */

	/* width of the 2 prognosis columns*/
	width: 202px;

	height: 100%;

	border-left: 1px solid #d1d1d1; /* border to have a boundary between this and normal yield div */
}

	/* grouping header expected */
	.yield_expected_text_padding_expected {
		padding-left: 8px; /* starts at same vertical point as the last month yield below it */
	}


/* Normal Header styling ===================================================== */

/* padding of the header */
.yield_expected.record_item_head {
    padding: 35px 10px 7px 38px; /* changed left so it matches the normal columns start */

	/*
		to be in front of the normal header
		this is used so we can extend the border line above the normal header and generate a separation
		because the normal line has no element on which we could anchor the separation line
	*/
	z-index: 100;
}

	/* first normal header row */
	.yield_expected.record_item_head div.col1 {
		/*
			this is needed becaues the php list class reduces the width for standard padding
			but since we dont have a standard padding we have to reset this
			so we need to set it back to the 180px that was set for the column in the sdsviewlistyieldexpectedplants class
		*/
		width: 185px !important;
	}

	/* today yield column header */
	.yield_expected.record_item_head div.col3 {

		/*
			in php for colum class has 10px padding set
			but header needs only 5px to match the data rows
			possible because of the border and other padding that happens bevor

			needs !important to override the style set directly for the element
		*/
		padding-left: 5px !important;
	}


/* Data Rows ================================================================== */

/* set the row height, otherwise the row would gain 1 pixel if highlited and I dont now way that happens */
#yieldexpected .record_item_container {
	height: 56px;
}

/* data rows */
.yield_expected.whole_height.record_item {

	/* removed padding */
	padding-bottom: 0;
    padding-top: 0;

	/* set height to whole height so we can latter use a border on some colums an that will than go over the full height of the element */
	height: 55px;
}

	/* columns of one data row */
	.yield_expected.whole_height.record_item div {
		/* overriding standard padding because we have changed outer div height */
		padding: 9px 0 10px 8px;

		/* lesser height than outer div because of the padding */
		height: 37px;
	}

	/* columns 3 and 7, start of yield and expected yield columns */
	.record_list .yield_expected.whole_height.record_item div.col3,
	.record_list .yield_expected.whole_height.record_item div.col7 {
		/* added border to the left side so we got a separation, matching the header */
		border-left: 1px solid #d1d1d1;
	}


/* Columns ================================================================== */

/* breaks word, beased on the browsers ability */
.break_words {
	/* Non standard for webkit, breaks the word without hyphens */
	word-break: break-word;

	/* works currently with firefox and safari and ie10+, not with chrome/webkit but set the variable for the future */
   -webkit-hyphens: auto;
	  -moz-hyphens: auto;
	   -ms-hyphens: auto;
		   hyphens: auto;
}

/* BAR ====================================================================== */

/* bar div, sorrounding the collored ones */
.record_list .record_item div.yield_expected_bar {

	padding: 0;
	margin: 0;

	position: relative; /* so the two inner divs can be absolute and overly each other */

	margin-top: 5%;

 	height: 10px;

	width: 50%;

	overflow: hidden; /* if inner divs got values bigger than 100 percent they dont overflow the borders */
}

	/*
	 * color of the colored bar
	 * based on the ist/soll calculation
	 *
     * used atributes instead of direct color names to swap colors easier
	 * like: changing average to light green instead of yellow ...
	 */

	.yield_expected_bad {
		background-color: #d73027; /* red */
	}

	.yield_expected_average {
		background-color: #fab512; /* yellow */
	}

	.yield_expected_good {
		background-color:  #1a9850; /* green */
	}

/* percent text behind main  bar */
span.yield_expected_bar_text {
	height: 10px; /* same as main  bar */

	float: right; /* so text does not start imedeately behind bar  */
	margin-top: 3%; /* center text horizontal with bar */
	margin-right: 5px; /* little gap to next column */
}

/* questionmark icon with tooltip for when no data is availiable */
.yield_expected_no_data_info.icon.icon_help.tooltip {
	cursor: pointer;
    display: inline-block;
    height: 20px;
    margin: 3px 2px -2px 0;
    vertical-align: top;
    width: 20px;
}

/* PROGNOSIS SELECT ========================================================== */

/* label has the same styling as the serach box label */
#yield_expected_select_prognosis_div label {
	font-size: 12px;
    font-weight: bold;
}

/* select box gets the same width and possition as the search input box */
#yield_expected_select_prognosis {
	float: right;

    margin-right: -9px; /* because the  */
	padding-left: 7px;

    width: 427px;
	height: 25px;
}

/* round border with shadow, like the standard image but not restricted to size */
.yield_expected_div_shadowborder {
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	border: 1px solid #B3B3B3;
	background-color: #FFFFFF;
	-webkit-box-shadow: #B3B3B3 2px 2px 2px inset;
	-moz-box-shadow: #B3B3B3 2px 2px 2px inset;
	box-shadow: #B3B3B3 2px 2px 2px inset;
}