.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;
	}

	/* 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: 10px;
        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: 30px;
    }

/* 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;
            }

		/* Secondary, E.g.: Cancel */

			.apps__actionButton--secondary {
				background-color: #FFFFFF;
			}

            .apps__actionButton--secondary:focus {
                background-color: #FFFFFF;
                color: #009CDE;
                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;
				
				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;

				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: 12pt;
        text-transform: uppercase;
        padding: 10px 10px 0px 10px;
    }

    .x-message-box .x-tool-close{
        background-color: #FFFFFF;
        color: #000000;
        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);
	    }

	    .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;
        }

    /*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;
    top: 5px;
    left: 8px;
    color: #646464;
    font-size: 13px;
    line-height: 21px;
}

.starlims-search-field .x-form-field {
	padding-left: 28px;
}