﻿.required .x-form-item-label-inner:after {
	content: "*";
	color: red;
}

/*fix for DateTime picker on 6.0.1; fixed in 6.0.2: 
https://www.sencha.com/forum/showthread.php?307051-Positioning-of-datepicker-in-extjs
*/
.x-datepicker.x-layer {
	position: fixed !important;
}

/* Fields */

.apps__field.apps__field--uppercase input, .apps__field.apps__field__password input {
	background-color: #F2F2F2;
}

.apps__field .x-form-field {
	font-family: robotoregular;
}

/*.apps__field .x-form-item-body.x-fa:before {
		position: absolute;
		margin-top: 10px;
		margin-left: 10px;
	}*/

.apps__field--uppercase .x-form-field {
	text-transform: uppercase;
}

.apps__field__label {
	font-family: robotobold;
	white-space: nowrap;
}

/*Fix for the checkbox being positioned below its label when boxLabelAlign == 'before'*/ 
.x-form-cb-label-default.x-form-cb-label-before {
    padding-right: 0px !important;
}

/* Meant to adjust the background of a container with the one of its text area
	We often need to put a text area in a container to handle it.*/

.apps__field--textArea {
	background-color: #FFFFFF;
}

	.apps__field--textArea textarea {
		font-family: robotoregular;
	}

.apps__field--withIcon .x-form-item-body.x-fa:before {
	position: absolute;
	margin-top: 6px;
	margin-left: 10px;
	/*
	*Icons were missing in controls when Sencha updraded to a newer version.
	*Adding z-index to ensure Icons are visible.
	*/
	z-index: 1;
}

.apps__field--withIcon input {
	padding-left: 35px !important;
}

/* Buttons */

/*Action Buttons*/

.apps__actionButton {
	border: 0;
	height: 29px;
	text-transform: uppercase;
	margin: 3px; /*For shadow on :hover state*/
	/*box-shadow: none;*/
}

	.apps__actionButton .x-btn-inner {
		/* Style guide says 14pt (vs px), but it renders too big. */
		font: normal normal bold 14px/16px robotobold;
	}

/* Primary, E.g.: OK */

.apps__actionButton--primary {
	//background-color: #009CDE;
}

	.apps__actionButton--primary:focus {
		// background-color: #009CDE;
		color: #FFFFFF;
		box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
	}

	.apps__actionButton--primary .x-btn-inner {
		color: #FFFFFF;
	}

	.apps__actionButton--primary:hover {
		color: #FFFFFF;
		//background-color: #009CDE;
		box-shadow: 0 0 3px rgba(0, 0, 0, 1) !important;
		outline: 3px solid transparent;
	}

	.apps__actionButton--primary.x-btn.x-btn-pressed {
		//background-color: #FFFFFF;
		box-shadow: none;
	}

		.apps__actionButton--primary.x-btn.x-btn-pressed .x-btn-inner {
			//color: #009CDE;
			color: #FFFFFF;
		}

/* Secondary, E.g.: Cancel */

.apps__actionButton--secondary {
	//background-color: #FFFFFF;
	background-color: transparent;
}

	.apps__actionButton--secondary:focus {
		/* background-color: #FFFFFF; */
		/* background-color: transparent; */
		/* color: #009CDE; */
		color: #FFFFFF;
		box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
		/* outline: 3px solid transparent; */
	}

	.apps__actionButton--secondary .x-btn-inner {
		color: #009CDE;
	}

	.apps__actionButton--secondary:hover {
		color: #009CDE;
		//background-color: #FFFFFF;
		background-color: transparent;
		box-shadow: 0 0 3px rgba(0, 0, 0, 1) !important;
		outline: 3px solid transparent;
	}

	.apps__actionButton--secondary.x-btn.x-btn-pressed {
		//background-color: #009CDE;
		background-color: #004E6F;
		box-shadow: none;
	}

		.apps__actionButton--secondary.x-btn.x-btn-pressed .x-btn-inner {
			color: #FFFFFF;
		}

/* Labels */

.apps___noteLabel {
	font-family: robotoregular;
}

.apps___noteLabel--centered {
	text-align: center;
}

.apps___noteLabel--leftAligned {
	text-align: left;
}

.apps___linkLabel {
	font-family: robotoregular;
	text-decoration: underline;
	color: #009CDE;
}

	.apps___linkLabel:focus {
		border: 1px dotted #000000;
	}

/* Titles */

.apps___popupTitle {
	font-family: robotobold;
	color: #646464;
	font-size: 12pt;
	text-transform: uppercase;
}

/* Fieldsets */

.apps__fieldset .x-fieldset-header-text {
	font-family: robotoregular;
	color: #000000;
}

/* Container */

.apps__window__contentContainer {
	padding: 0px 25px 0px 25px;
}

/* Windows */

.apps__window {
	border: 0.5pt solid #CCCCCC;
}

	.apps__window .x-window-header {
		background-color: #FFFFFF;
		border: 0;
	}

	.apps__window .x-title-text {
		font-family: robotobold;
		color: #646464;
		font-size: 12pt;
		text-transform: uppercase;
		padding: 10px 10px 0px 10px;
	}

	.apps__window .x-tool-close {
		background-color: #FFFFFF;
		color: #000000;
		margin: 0px 0px 0px -20px;
	}

	.apps__window .x-box-item:focus .x-tool-img {
		border: 1px dotted #000000;
	}

/* Message Boxes */

.x-message-box {
	border: 0.5pt solid #CCCCCC;
}

	.x-message-box .x-window-header {
		background-color: #FFFFFF;
		border: 0;
	}

	.x-message-box .x-box-item:focus .x-tool-img {
		border: 1px dotted #000000;
	}

	.x-message-box .x-title-text {
		font-family: robotobold;
		color: #646464;
		font-size: 12px;
		text-transform: uppercase;
		padding: 7px 10px 0px 15px;
	}

	.x-message-box .x-tool-close {
		background-color: #FFFFFF;
		color: #646464;
		/* margin: 0px 0px 0px -20px; */
	}

	.x-message-box .x-window-item {
		padding: 10px 25px 10px 25px !important;
	}

	.x-message-box .x-toolbar {
		background-color: #FFFFFF;
		padding: 6px 0px 12px 6px !important;
	}

	.x-message-box .x-btn {
		border: 0;
		height: 29px;
		text-transform: uppercase;
		margin: 3px; /* For shadow on :hover state */
		box-shadow: none;
	}

		.x-message-box .x-btn .x-btn-inner {
			/* Style guide says 14pt (vs px), but it renders too big. */
			font: normal normal bold 14px/16px robotobold;
		}

	/*Primary Buttons*/ /* First two buttons are OK and Yes */

	/*  .x-message-box .x-box-target .x-btn:nth-of-type(-n+2) {
			background-color: #009CDE;
		}

		.x-message-box .x-box-target .x-btn:nth-of-type(-n+2):focus {
			box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
			color: #FFFFFF;
		}

		.x-message-box .x-box-target .x-btn:nth-of-type(-n+2) .x-btn-inner{
			color: #FFFFFF;
		}*/

	.x-message-box .x-box-target .x-btn:nth-of-type(-n+2):hover {
		/* color: #FFFFFF;
			background-color: #009CDE;
			box-shadow: 0 0 3px rgba(0, 0, 0, 1); */
		box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
	}

	.x-message-box .x-box-target .x-btn:nth-of-type(-n+2).x-btn-pressed {
		/*  background-color: #FFFFFF; */
		box-shadow: none;
	}

	/*.x-message-box .x-box-target .x-btn:nth-of-type(-n+2).x-btn-pressed .x-btn-inner {
			color: #009CDE;
			color : white;
		}*/

	/*Secondary Buttons*/ /* Last two buttons are No and Cancel */

	.x-message-box .x-box-target .x-btn:nth-last-of-type(-n+2) {
		background-color: #FFFFFF;
	}

		.x-message-box .x-box-target .x-btn:nth-last-of-type(-n+2):focus {
			box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
			color: #009CDE;
		}

		.x-message-box .x-box-target .x-btn:nth-last-of-type(-n+2) .x-btn-inner {
			color: #009CDE;
		}

		.x-message-box .x-box-target .x-btn:nth-last-of-type(-n+2):hover {
			color: #009CDE;
			background-color: #FFFFFF;
			box-shadow: 0 0 3px rgba(0, 0, 0, 1);
		}

		.x-message-box .x-box-target .x-btn:nth-last-of-type(-n+2).x-btn.x-btn-pressed {
			background-color: #009CDE;
			box-shadow: none;
		}

			.x-message-box .x-box-target .x-btn:nth-last-of-type(-n+2).x-btn.x-btn-pressed .x-btn-inner {
				color: #FFFFFF;
			}

/*STARLIMS apps tabs
------------------------------------------*/

.starlims-app .x-tab-bar-default {
	background-color: white;
}

.starlims-app .x-tab-default-top {
	padding-bottom: 0px;
}

.starlims-app .x-tab-inner-default {
	color: #888b8d;
	font-weight: bold;
}

.starlims-app .x-tab.x-tab-active.x-tab-default .x-tab-inner-default {
	color: #009cde;
}

.starlims-app .x-tab.x-tab-active.x-tab-default {
	border-bottom: 2px solid #009cde;
}

.starlims-app .x-tab-active.x-tab-focus.x-tab-default {
	outline-style: none;
	background-color: rgba(0, 0, 0, 0.08);
}

.starlims-app .x-tab-pressed.x-tab-default-focus {
	outline-style: none;
}

.starlims-app .x-tab-bar-default-top > .x-tab-bar-body-default {
	padding-left: 0;
}

.starlims-app .x-tab-default {
	text-transform: uppercase;
}

.starlims-app .x-tab-bar-default-scroller .x-box-scroller-body-horizontal {
	margin-left: 32px;
}

/*STARLIMS icon button
------------------------------------------*/

.starlims-icon-button .x-btn-icon-el-default-small {
	color: white;
	height: 20px;
	width: 20px;
	font-size: 20px;
}

.starlims-icon-button.x-btn-default-small {
	background-color: #009cde;
	border-color: #009cde;
	padding: 5px 5px 5px 5px;
	border-radius: 5px;
}

	.starlims-icon-button.x-btn-default-small.x-btn-over,
	.starlims-icon-button.x-btn-default-small.x-btn-focus {
		background-color: #009cde;
		-webkit-box-shadow: #d3e0ec 0 1px 0px 0 inset, #d3e0ec 0 -1px 0px 0 inset, #d3e0ec -1px 0 0px 0 inset, #d3e0ec 1px 0 0px 0 inset;
		-moz-box-shadow: #d3e0ec 0 1px 0px 0 inset, #d3e0ec 0 -1px 0px 0 inset, #d3e0ec -1px 0 0px 0 inset, #d3e0ec 1px 0 0px 0 inset;
		box-shadow: #d3e0ec 0 1px 0px 0 inset, #d3e0ec 0 -1px 0px 0 inset, #d3e0ec -1px 0 0px 0 inset, #d3e0ec 1px 0 0px 0 inset;
	}

		.starlims-icon-button.x-btn-default-small.x-btn-over .x-btn-icon-el-default-small,
		.starlims-icon-button.x-btn-default-small.x-btn-focus .x-btn-icon-el-default-small {
			color: #f2e18c;
		}

/*STARLIMS search field
------------------------------------------*/

.starlims-search-field .x-form-text-wrap:before {
	content: "\f002" !important;
	font-family: FontAwesome;
	position: absolute;
	left: 8px;
	color: #646464;
	font-size: 13px;
	line-height: 21px;
}

.starlims-search-field .x-form-field {
	padding-left: 28px !important;
}
