@import "starlims-wizard.css";

/* Body */

body {
	background-color: rgb(0, 156, 222); /*#009CDE*/
}

@media print {
	body {
		background-color: rgb(255, 255, 255);
	}
}


/*About Box
------------------------------------------*/

.about-bottom .x-form-textarea-body .x-form-trigger-wrap {
	border: none !important;
}

.about-bottom-text .x-form-field {
	padding-left: 0;
}


/* Dialogs.MessageBox icon style
------------------------------------------------*/
/*Z00002399B0157 - Valentin - fix for progress bar style*/
.x-message-box .x-window-item.x-progress {
	padding: 0 !important;
}

.starlims-message-box .x-message-box-icon {
	font-size: 35px !important;
	color: #646464;
}


/* DataGrid with narrow rows and header-checkbox
------------------------------------------------*/

.starlims-narrow-grid-row .x-grid-cell-inner {
	padding-top: 2px;
	padding-bottom: 0px;
	min-height: 17px;
	font-size: 11px;
}

.starlims-narrow-grid-row .x-column-header-inner {
	padding-top: 0px;
	padding-bottom: 0px;
	font-size: 11px;
}


/* Row Editor, Checkbox alignment problem */

div.x-grid-cell-editor div.x-form-item-body.x-form-cb-wrap {
	display: block;
	margin: 3px auto 0 auto;
	width: 0px;
}


/* TextBox triggers
------------------------------------------*/

.starlims-trigger-arrow {
	font: 16px/16px FontAwesome;
	vertical-align: center;
	width: 20px;
}

	.starlims-trigger-arrow:before {
		/*content: '\f107';*/
	}

.starlims-trigger-ellipsis {
	font: 16px/16px FontAwesome;
	vertical-align: bottom;
	width: 20px;
}

	.starlims-trigger-ellipsis:before {
		content: '\f141';
	}


/* DateTimePicker triggers
------------------------------------------*/
.x-datepicker {
	border-width: 1px;
	border-style: solid;
	border-color: #ccc;
	background-color: #fff;
	width: 313px;
}

/* Updating based on new theme(below in Capgemini Changes
------------------------------------------*/


/*.starlims-trigger-checked {
	font: 16px/16px FontAwesome;
	vertical-align: middle;
	width: 20px;
}

.starlims-trigger-unchecked {
	font: 16px/16px FontAwesome;
	vertical-align: middle;
	width: 20px;
}

.starlims-trigger-checked:before {
	content: '\f046';
}

.starlims-trigger-unchecked:before {
	content: '\f096';
}*/


/*Shell Loading Message
------------------------------------------*/

.x-mask-msg {
	padding: 10px;
	background: #d0d0d0;
	border-radius: 5px;
}


/*Shell mainview
------------------------------------------*/

.shell-main-view {
	background-color: white;
}

.app-main {
	background-color: #e3e3e3;
}


/*Shell Apps - Remove Border from Apps
------------------------------------------*/

.x-container .shell-application-hoster .x-box-item .x-container-default {
	border: none;
}

.x-container .shell-application-hoster .x-box-item .shell-dashboardform .x-container-default.starlimsform {
	border: 1px solid #ccc;
}


/*Shell topbar
------------------------------------------*/

.shell-starlims-logo {
	height: 14px !important;
	width: 80% !important;
	top: 17px !important;
	background-image: url(images/Logo.png);
	background-size: contain;
	background-repeat: no-repeat;
}

.shell-main-view,
.shell-main-view > .x-panel-body,
.shell-topbar div {
	border: none;
}

.shell-topbar .x-panel-body-default {
	background-color: #009CDE;
	border: none;
}

.shell-topbar-button.x-btn,
.shell-starlims-console-button.x-btn,
.shell-topbar-button.x-btn-focus {
	background-color: transparent !important;
	border: none !important;
	box-shadow: none !important;
}

.shell-topbar-button.x-btn-over.x-btn,
.shell-starlims-console-button.x-btn-over.x-btn {
	background-color: transparent;
}

.shell-topbar-button .x-btn-icon-el:hover {
	color: #F2E18C;
}

.shell-topbar-button:focus .x-btn-icon-el {
	color: #F2E18C;
}


/*Console button
------------------------------------------*/

a.shell-starlims-console-button.x-btn-over ::before {
	color: #ffe460;
}

a.shell-starlims-console-button.x-btn-focus ::before {
	color: #F2E18C;
}

a.shell-starlims-console-button {
	color: white;
	height: 48px;
	top: 0px;
}

.shell-starlims-console-button span {
	color: inherit;
}

	.shell-starlims-console-button span.x-btn-inner {
		font-family: 'roboto_condensedregular';
		font-weight: bold;
		font-size: 16pt;
		height: 48px;
		padding-top: 16px;
	}


/*Breadcrumbs
------------------------------------------*/

.shell-breadcrumbs {
	background-color: #f2f2f2;
	/* border-bottom: 1px solid #cccccc; */
	font-weight: 400;
	color: #222731;
	padding-left: 5px;
}


/*Console
------------------------------------------*/

.shell-console-container,
.shell-console-container > .x-panel-body,
.shell-console div,
.shell-console .x-grid-cell-inner.x-grid-cell-inner-treecolumn {
	border: none;
	background-color: #f2f2f2 !important;
}

.shell-console .x-grid-body {
	border: none !important;
}


/* 
*Due to minor change in the structure when sencha upgraded to a newer version.
*Added x-panel-bodywrap to ensure that dashboard looks similar.
*/

.shell-console.x-tree-panel,
.shell-console > .x-panel-bodyWrap,
.shell-console > .x-panel-bodyWrap > .x-grid-header-ct,
.shell-console > .x-panel-bodyWrap > .x-panel-body,
.shell-console > .x-panel-bodyWrap > .x-panel-body .x-grid-item {
	background-color: #f2f2f2 !important;
	border-style: none;
}

	.shell-console > .x-panel-bodyWrap > .x-panel-body .x-grid-item {
		color: #cccccc;
	}

	.shell-console > .x-panel-bodyWrap .x-grid-item td.x-grid-item-focused {
		color: inherit;
	}

.shell-console .x-grid-cell-inner-treecolumn:before {
	border: none !important;
}

.shell-console .x-tree-elbow-img.x-tree-expander {
	color: #cccccc !important;
	display: none;
}

.shell-console .x-tree-icon {
	display: none;
}

.shell-console span.x-tree-node-text span.shell-console-parent,
.shell-console span.x-tree-node-text span.shell-console-leaf {
	font-family: 'robotobold';
}

.shell-console span.shell-console-leaf {
	color: #646464;
	/*font-family:robotoregular !important;*/
}

.shell-console span.shell-console-parent {
	font-weight: 500;
	color: #646464;
}

.shell-console .x-grid-cell:hover span.shell-console-parent {
	color: #009CDE;
}

.shell-console .x-grid-cell:focus span.shell-console-parent {
	color: #009CDE;
}

.shell-console .x-grid-cell:focus span::before {
	color: #009CDE;
}

.shell-console .x-grid-item-focused span.shell-console-parent {
	color: #009CDE;
}

.shell-console .x-grid-item span.x-tree-node-text:hover {
	cursor: pointer;
}

.shell-console .x-grid-item .pin-app-button {
	display: none;
}

.shell-console .x-grid-item:hover .pin-app-button {
	display: inline;
}

.shell-console .x-grid-item .pin-app-button:focus {
	display: inline;
	color: #009CDE;
}

.shell-console .x-grid-item:hover span.x-tree-node-text > span::before {
	color: #009CDE;
}

.shell-console .x-grid-cell:focus span.x-tree-node-text > span::before {
	color: #009CDE;
}

.shell-console .x-grid-cell:focus span.x-tree-node-text > span > span {
	color: #009CDE;
}

.shell-console .x-grid-item:hover .shell-console-leaf {
	color: #009CDE;
}

	.shell-console .x-grid-item:hover .shell-console-leaf > span::before {
		color: #009CDE;
	}

.shell-console-container,
.shell-console-container > div.x-panel-body,
.shell-console,
.shell-console > div.x-panel-body,
.app-main > div,
.app-main .x-box-target,
.shell-console .x-tree-view {
	height: 100% !important;
}


/*Console Pin Button
------------------------------------------*/

div.shell-console-container > div.x-panel-body,
.shell-console-toolbar {
	top: 0px !important;
}

.shell-console-toolbar {
	background: #f2f2f2;
	width: 60px !important;
	right: 15px !important;
	left: auto !important;
	border: none;
	height: 30px !important;
}

.shell-console-pin-button {
	right: auto !important;
	left: 35px !important;
	background: transparent;
	border: none;
	width: 20px;
	top: -4px !important;
}

.shell-console-designer-button {
	right: auto !important;
	left: 18px !important;
	background: transparent;
	border: none;
	width: 20px;
	top: -4px !important;
}

.shell-console-refresh-button {
	right: auto !important;
	left: 0px !important;
	background: transparent;
	border: none;
	width: 20px;
	top: -4px !important;
}

	.shell-console-pin-button.x-btn-focus,
	.shell-console-pin-button.x-btn-over,
	.shell-console-designer-button.x-btn-focus,
	.shell-console-designer-button.x-btn-over,
	.shell-console-refresh-button.x-btn-focus,
	.shell-console-refresh-button.x-btn-over {
		box-shadow: none !important;
	}

		.shell-console-pin-button.x-btn-over .x-btn-icon-el,
		.shell-console-pin-button.x-btn-focus .x-btn-icon-el,
		.shell-console-designer-button.x-btn-over .x-btn-icon-el,
		.shell-console-designer-button.x-btn-focus .x-btn-icon-el,
		.shell-console-refresh-button.x-btn-over .x-btn-icon-el,
		.shell-console-refresh-button.x-btn-focus .x-btn-icon-el {
			color: #009CDE;
		}

	.shell-console-pin-button.x-btn-over,
	.shell-console-pin-button.x-btn-pressed,
	.shell-console-pin-button.x-btn-focus,
	.shell-console-designer-button.x-btn-over,
	.shell-console-designer-button.x-btn-pressed,
	.shell-console-designer-button.x-btn-focus,
	.shell-console-refresh-button.x-btn-over,
	.shell-console-refresh-button.x-btn-pressed,
	.shell-console-refresh-button.x-btn-focus {
		background-color: transparent !important;
	}

/* commented for portal
.baseNotificationButton,
.baseNotificationButton:hover {
	background-color: #009CDE !important;
}

.baseNotificationButton.x-btn-over .x-btn-icon-el,
.baseNotificationButton.x-btn-focus .x-btn-icon-el {
	color: #F2E18C;
}
*/

/*the circle with number over every button
------------------------------------------*/

.baseNotificationButton .x-btn-text .x-btn-inner {
	display: inline-block;
	min-width: 26px;
	/*padding: 4px 13px 3px 4px;*/
	font-size: 9px;
	font-weight: 400;
	line-height: 2;
	color: #fff;
	white-space: nowrap;
	vertical-align: middle;
	background-color: #DE0B00;
	border-radius: 5px;
	position: inherit;
	top: -4px;
	margin-left: -12px;
	float: right;
}

.baseNotificationButton.animated .x-btn-text .x-btn-inner {
	animation: pound .5s 5;
}

.baseNotificationButton {
	border: none;
}

	.baseNotificationButton.x-btn {
		box-shadow: none !important;
	}


/*color of the icon for notifications
------------------------------------------*/

.glyphRed .x-menu-item-glyph {
	color: red;
}


/*color of the icon for notifications
------------------------------------------*/

.glyphGreen .x-menu-item-glyph {
	color: green;
}


/* Notification Animation Settings
------------------------------------------*/

@keyframes pound {
	from {
		transform: none;
	}

	50% {
		transform: scale(1.4);
	}

	to {
		transform: none;
	}
}


/*--------------------------------------------------------------STARLIMS PLATFORM HTML 

CONTROLS--------------------------------------------------------------*/


/*StarlimsTreeView*/


/*UseImages property*/

.starlims-control-treebody-images table td > div > img {
	display: none;
}


/*.starlims-control-treebody-images table td > div > span {
	padding-left: 0px;
}*/


/*End StarlimsTreeView*/

.x-form-itemselector-addAll {
	background-image: url(images/allRight.gif);
}


/* /home/teamcity/buildAgent/work/47e72153b7b97580/sencha/ext/packages/ux/classic/sass/src/form/ItemSelector.scss:20 */

.x-form-itemselector-removeAll {
	background-image: url(images/allLeft.gif);
}


/*------------------------------------------------------------END STARLIMS PLATFORM HTML 

CONTROLS------------------------------------------------------------*/

.treeicon {
	background-size: cover;
	background-repeat: no-repeat;
	height: auto !important;
	vertical-align: middle;
}


/* Capgemini Changes */


/*Primary button 
------------------------------------------*/


/* Text uppercase */


/* .x-btn-inner { */


/* text-transform: uppercase; */


/* text-align:center; */


/* } */


/* over */


/* .x-btn-over { */


/* box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5); */


/* } */


/* Focused-over */


/* .x-keyboard-mode .x-btn-focus.x-btn-over.x-btn-default-small { */


/* box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5); */


/* } */


/* Pressed */


/* .x-btn.x-btn-pressed.x-btn-default-small { */


/* box-shadow: 0px 0px 0px rgba(0, 0, 0, 0); */


/* } */


/* Disabled */


/* .x-btn-disabled.x-btn-default-small { */


/* opacity: 1; */


/* } */


/*secondary button hover 
------------------------------------------*/


/* over */


/* .x-btn-over.x-btn-secondary-small { */


/* box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5); */


/* border-width: 0.5pt; */


/* } */


/* Focused-over */


/* .x-keyboard-mode .x-btn-focus.x-btn-over.x-btn-secondary-small { */


/* box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5); */


/* } */


/* Pressed */


/* .x-btn.x-btn-pressed.x-btn-secondary-small { */


/* box-shadow: 0px 0px 0px rgba(0, 0, 0, 0); */


/* } */


/* Disabled */


/* .x-btn-disabled.x-btn-secondary-small { */


/* opacity: 1; */


/* } */


/*Linkbutton/Linklabel 
------------------------------------------*/


/* Text  */


/* a{ */


/* font-family : robotobold; */


/* } */


/*combobox 
------------------------------------------*/


/* hover  */


/* .x-boundlist-item-over { */


/* color: #646464; */


/* } */


/*treeview 
------------------------------------------*/


/* checkbox-checked */


/* .x-tree-checkbox-checked { */


/* color: black; */


/* } */


/* Monthpicker
------------------------------------------*/


/* Today button  */


/* .x-btn-inner-default-small { */


/* padding: 7px 7px; */


/* } */


/* Tab-panel
------------------------------------------*/


/* Scroll Arrow i.e default is 0.5 */


/* .x-box-scroller-tab-bar-default { */


/* opacity: 1; */


/* } */


/* Tab text */


/* .x-tab-inner-default { */


/* text-transform: uppercase; */


/* } */


/* Strip position */


/* .x-tab-bar-vertical .x-tab-bar-strip { */


/* top: 10px; */


/* } */


/* .x-tab-bar-left > .x-tab-bar-strip { */


/* right: 1px; */


/* } */


/* .x-tab-bar-horizontal .x-tab-bar-strip { */


/* left: 10px; */


/* } */


/* Tab bar min-width */


/* .x-tab-bar-vertical > .x-tab-bar-body-default { */


/* min-width: 0px; */


/* } */


/* .x-tab-bar-horizontal > .x-tab-bar-body-default { */


/* min-height: 0px; */


/* } */


/* Tab-over underline */


/* .x-tab-over.x-tab-default { */


/* border-color: transparent;  */


/* } */


/* .x-fieldset-groupbox_gray{ */


/* background-color:#f2f2f2 !important;  */


/* } */


/*Form Item (General) 
------------------------------------------*/


/* Collapse Multiple borders */


/* .x-form-item { */


/* display: table; */


/* table-layout: fixed; */


/* border-spacing: 0; */


/* border-collapse: collapse; */


/* } */


/*Checkbox 
------------------------------------------*/


/* Creating custom Checkbox */


/* .x-form-checkbox-default { */


/* /* font: 18px/1 ExtJS; */


/* /* color: transparent; */


/* background-color: white; */


/* border-style: solid; */


/* border-color: #ccc; */


/* border-width: 0.5pt; */


/* /* width: 15px; */


/* /* height: 15px; */


/* /* position: relative; */


/* bottom: 1px; */


/* /* top: initial; */


/* left: -5px; */


/* /* right: 5px; */


/* /* color: black; */


/* } */


/* Can't be removed because of the pseudo element */

.x-form-cb-checked .x-form-checkbox-default:before {
	/* content: "\2611"; */
	font-family: fontawesome;
	/* font-size: 12px; */
	/* content: "\f00c"; */
	position: absolute;
	top: 7%;
	left: 6%;
}


/* .x-form-checkbox-default:before { */


/* content: "\2610";  */


/* content: ''; */


/* } */


/*Focus on Checked Checkbox */


/* .x-keyboard-mode .x-form-cb-checked .x-form-checkbox-focus.x-form-checkbox-default { */


/* /*color: #009cde; */


/* border-color: #0075A7; */


/* } */


/*Focus on Unchecked Checkbox */


/* .x-keyboard-mode .x-form-checkbox-focus.x-form-checkbox-default { */


/* /*color: #009cde; */


/* border-color: #0075A7; */


/* } */


/*On hover */


/* .x-form-checkbox-default:hover { */


/* box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5); */


/* text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); */


/* } */


/*Radio Button 
------------------------------------------*/


/* Creating custom Radio Button */


/* .x-form-radio-default { */


/* /* font: 18px/1 FontAwesome; */


/* /* font: 18px/1 FontAwesome; */


/* /* color: transparent; */


/* /* background: transparent; */


/* width: 12pt; */


/* height: 12pt; */


/* border: 0.5pt solid #ccc; */


/* border-radius: 100%; */


/* /* background: #fff; */


/* bottom: 1px; */


/* left: -5px; */


/* background-color: white; */


/* /* color: black; */


/* } */


/* Can't be removed because of the pseudo element */

.x-form-cb-checked .x-form-radio-default:before {
	position: absolute;
	top: 21.874999%;
	left: 26.888889%;
}


/* .x-form-radio-default:before { */


/* content: "\f1db"; */


/* content: ''; */


/* } */


/*On hover */


/* .x-form-radio-default:hover { */


/* box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5); */


/* text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); */


/* } */


/*Focus on Checked Radio */


/* .x-keyboard-mode .x-form-cb-checked .x-form-checkbox-focus.x-form-radio-default { */


/* /*color: #009cde; */


/* border-color: #0075A7; */


/* } */


/*Focus on Unchecked Radio */


/* .x-keyboard-mode .x-form-checkbox-focus.x-form-radio-default { */


/* /*color: #009cde; */


/* border-color: #0075A7; */


/* } */


/*Checked List Box
------------------------------------------*/


/* Can't be removed because of the pseudo element */


/* Unchecked checkbox color */


/* .x-column-header-checkbox .x-column-header-checkbox:after, .x-grid-checkcolumn:after { */


/* content: '\f096'; */


/* font-size: 18px; */


/* color: #ccc; */


/* } */


/* Checked checkbox in DataGrid */


/* .x-column-header-checkbox .x-column-header-checkbox:after, .x-grid-checkcolumn-checked:after { */


/* content: "\f14a"; */


/* font: 18px/1 FontAwesome; */


/* color: #000; */


/* } */


/* .x-grid-hd-checker-on .x-column-header-checkbox:after, .x-grid-checkcolumn-checked:after { */


/* content: "\f14a"; */


/* font: 18px/1 FontAwesome; */


/* color: #000; */


/* } */


/* Toolbar Icon Button
------------------------------------------*/


/* On Hover */


/* .x-html-editor-tb .x-btn-icon-el:hover { */


/* color: #f2e18c; */


/* } */


/* .form-text-field-disabled{ */


/* opacity: 0.3; */


/* background-color: black; */


/* } */


/*Menu item 
--------------------------------------------*/


/* Not Active*/


/* .x-menu-item-default.x-menu-item-disabled { */


/* opacity: 1; */


/* } */


/* .x-menu-icon-separator-default { */


/* background-color: #646464; */


/* border-left : none; */


/* } */


/*Panel Header Tool Icon */


/* .x-tool-tool-el { */


/* margin: 0px -25px; */


/* text-align: unset;  */


/* } */


/* Splitter */


/* .x-splitter { */


/* background-color: #009cde; */


/* height:2px; */


/* } */


/* All the classes for multichoice are defined in ux-all.css file so here */


/* we are simply overriding them */


/* Multichoice Toolbar */

.x-form-item-body-toolbar_white .x-toolbar-default {
	background-color: white;
	border-style: none;
}

.x-form-itemselector-remove {
	background-image: none;
	line-height: 13px;
}

	.x-form-itemselector-remove:before {
		font-family: fontawesome;
		font-size: 16px;
		content: "\f104";
	}

.x-form-itemselector-add {
	background-image: none;
	line-height: 13px;
}

	.x-form-itemselector-add:before {
		font-family: fontawesome;
		font-size: 16px;
		content: "\f105";
	}

.x-form-itemselector-addAll {
	background-image: none;
	line-height: 13px;
}

	.x-form-itemselector-addAll:before {
		font-family: fontawesome;
		font-size: 16px;
		content: "\f101";
	}

.x-form-itemselector-removeAll {
	background-image: none;
	line-height: 13px;
}

	.x-form-itemselector-removeAll:before {
		font-family: fontawesome;
		font-size: 16px;
		content: "\f100";
	}


/* Imagepicker toolbar */
.x-toolbar-footer {
	padding: 6px 0 6px 6px;
	border-style: none none solid none;
	border-color: #ccc;
	border-width: 0;
	background-image: none;
	background-color: white;
}

.view-details-button:before {
	font-family: fontawesome;
	font-size: 25px;
	content: "\f00b";
	top: 3px;
}

.view-list-button:before {
	font-family: fontawesome;
	font-size: 25px;
	content: "\f00a";
	top: 3px;
}

.view-large-button:before {
	font-family: fontawesome;
	font-size: 25px;
	content: "\f009";
	top: 3px;
}

.view-small-button:before {
	font-family: fontawesome;
	font-size: 25px;
	content: "\f0ce";
	top: 3px;
}

.save-image-button:before {
	font-family: fontawesome;
	font-size: 25px;
	content: "\f0c7";
	top: 3px;
}

.stretch-size-button:before {
	font-family: fontawesome;
	font-size: 25px;
	content: "\f065";
	top: 3px;
}

.normal-size-button:before {
	font-family: fontawesome;
	font-size: 25px;
	content: "\f066";
	top: 3px;
}

.add-image-button:before {
	font-family: fontawesome;
	font-size: 25px;
	content: "\f002";
	top: 3px;
}


/* ContextMenu */


/*.x-menu-item-icon-default {
	top: 7px;
	left: 8px;
}*/

.AddMultiImg .x-menu-item-icon-default:before {
	font-family: fontawesome;
	font-size: 20px;
	color: white;
	content: "\f009";
	background-image: none;
}

.AddImg .x-menu-item-icon-default:before {
	font-family: fontawesome;
	font-size: 20px;
	color: white;
	content: "\f1c5";
	background-image: none;
}

.DelCategory .x-menu-item-icon-default:before,
.delImg .x-menu-item-icon-default:before {
	font-family: fontawesome;
	font-size: 20px;
	color: white;
	content: "\f014";
	background-image: none;
}

.CategoryProp .x-menu-item-icon-default:before,
.imgProp .x-menu-item-icon-default:before {
	font-family: fontawesome;
	font-size: 20px;
	color: white;
	content: "\f05a";
	background-image: none;
}

.moveImg .x-menu-item-icon-default:before {
	font-family: fontawesome;
	font-size: 20px;
	color: white;
	content: "\f045";
	background-image: none;
}

.copyImg .x-menu-item-icon-default:before {
	font-family: fontawesome;
	font-size: 20px;
	color: white;
	content: "\f0c5";
	background-image: none;
}

.new_category_dialog .x-form-item-label {
	width: 133px !important;
	padding-bottom: 10px !important;
}

.new_category_dialog input {
	height: 24px !important;
}

.new_category_dialog textarea {
	height: 100px !important;
}


/* Icon Button spacing */


/* .x-btn-text.x-btn-icon-left > .x-btn-icon-el-default-small { */


/* margin-right: 3px; */


/* } */


/* End Capgemini Changes */


/* All classes below are custom defined */


/*Changes for Image Picker*/

.iconItem {
	padding-left: 5px;
	padding-top: 5px;
	width: 70px;
	height: 60px;
	float: left
}

.hlistItem {
	width: 180px;
	height: 30px;
	float: left;
	margin-top: 5px;
	margin-left: 5px;
}

.list img {
	max-width: 25px;
	max-height: 25px;
}

.iconItem img {
	max-width: 32px;
	max-height: 32px;
}

.listSmall img {
	max-width: 25px;
	max-height: 25px;
}

.list {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
}

.iconItemSub {
	height: 35px;
}

.listSmall {
	flex-wrap: wrap;
}

.list p {
	margin-top: -24px;
	margin-left: 24px;
	overflow: hidden;
	text-overflow: ellipsis;
}

.listSmall p {
	margin-top: -24px;
	margin-left: 24px;
	overflow: hidden;
	text-overflow: ellipsis;
}

.iconItem p {
	-webkit-margin-before: 0em;
	-webkit-margin-after: 0em;
	overflow: hidden;
	text-overflow: ellipsis;
}

.imageSmall {
	height: 30px;
	width: 30px;
}

.selectedImage {
	background-color: lightskyblue;
}

.hlistItem.selected,
.iconItem.selected {
	background-color: rgb(255, 239, 187);
	color: #404040;
	cursor: default;
}

.preview-section {
	overflow-x: auto !important;
}

	.preview-section .x-box-inner {
		overflow: auto !important;
		width: 200px !important;
	}


/*End Changes for Image Picker*/


/* DateTimePicker triggers
------------------------------------------*/

.starlims-trigger-checked {
	font: 16px/16px FontAwesome;
	vertical-align: middle;
	width: 12px;
	height: 12px;
	border: 1px solid #ccc;
	background: white;
	position: absolute;
	left: 5px;
	top: 6px;
}

.starlims-trigger-unchecked {
	font: 16px/16px FontAwesome;
	vertical-align: middle;
	width: 12px;
	height: 12px;
	border: 1px solid #ccc;
	background: white;
	position: absolute;
	left: 5px;
	top: 6px;
}

.starlims-trigger-checked:before {
	content: "\f00c";
	font: 9px FontAwesome;
	color: #222731;
	position: absolute;
	top: 4%;
	left: 4%;
}

.starlims-trigger-unchecked:before {
	content: '';
}

.starlims-trigger-checked + .x-form-text-wrap,
.starlims-trigger-unchecked + .x-form-text-wrap {
	left: 14px;
	padding: 0 2px 0 8px;
}

	.starlims-trigger-unchecked + .x-form-text-wrap > .x-form-text-default {
		padding-left: 1px !important;
	}

	.starlims-trigger-checked + .x-form-text-wrap > .x-form-text-default {
		padding-left: 1px !important;
	}


/* Dialog Box changes */

.starlims-message-box .x-window-text {
	font-family: robotoregular;
}

.shell-console-container .x-panel-header-default {
	background-color: #f2f2f2;
}


/* Console Search Bar style */

.console-search-bar.x-form-item-default {
	width: 227px !important;
}

.console-search-bar .x-form-text-field-body-default {
	border: 1px solid #ccc;
}

.console-search-bar .x-form-clear-trigger-default {
	background-color: white;
	font-size: 14px !important;
	width: 24px;
}

.x-box-target .shell-console-container:first-child .console-search-bar {
	margin-left: 10px;
}

.console-search-bar.x-form-item-default.x-field-focus .x-form-text-field-body-default {
	border-color: #0075A7;
}

/* 
	Overrides: These changes specifically override StarlimsTheme generated CSS
*/
.x-item-disabled .x-form-trigger-default {
	color: #646464;
}

.x-item-disabled .x-form-cb-label-default {
	color: #646464;
}

.x-item-disabled .x-form-field {
	color: #646464;
	background: #f2f2f2;
}

.x-item-disabled .x-btn-text {
	color: #646464;
}

.x-btn-inner-default-small {
	padding: 0;
}

.x-grid-td.x-grid-cell-rowbody {
	border: 1px solid rgb(194, 224, 237);
	border-left: none;
	border-bottom: none;
}

.x-grid-cell-inner-row-expander {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}

.x-btn-inner-secondary-small {
	padding: 0;
}

.x-column-header {
	background-color: #f2f2f2;
}


/* Accordion Fixes */

.x-accordion-item .x-accordion-hd {
	background: transparent;
	padding: 0px 10px;
}

.x-accordion-hd .x-panel-header-title {
	color: #646464;
	font-size: 12px;
	font-weight: 400;
	font-family: robotobold;
	line-height: 29px;
}

.x-tool-tool-el {
	text-align: center;
}

.x-accordion-layout-ct {
	padding: 0px;
}


.x-accordion-hd .x-tool-tool-el {
	background-color: transparent;
	color: #009cde;
}

/* Move the panel border to the actual panel instead of the body */
.x-panel-panel_white {
	border: 1px solid #ccc;
}

.x-panel-body-panel_white {
	border: none;
}

.x-tabpanel-child > .x-panel-bodyWrap > .x-panel-body {
	border-color: #ccc;
	border-style: solid;
	border-width: 1px !important;
}

/* Calendar */

.ui-cal-event {
	min-height: 20px;
}

.ui-btn-disabled {
	display: none !important;
}

/* 
	Data grid row hover and selection sometimes is overridden by backcolor
	Moving back-color to the .x-grid-cell-inner
*/
.x-grid-item-over {
	background-color: rgba(242, 225, 140, 0.44) !important;
}

	.x-grid-item-over .x-grid-cell-inner {
		background-color: inherit !important;
	}

.x-grid-item-selected {
	background-color: #f2e18c !important;
}

	.x-grid-item-selected .x-grid-cell-inner {
		background-color: inherit !important;
	}

.x-grid-row .x-grid-cell-selected {
	background-color: #f2e18c !important;
}

/* Tool Tips */

/* 
	Commented out overflow 
	tooltip would cause grid to shif when clicking bottom rows

*/

.x-tip {
	position: absolute;
	overflow: hidden;
}

/* Z00001381B2686: Valentin, fix drop-down width for combo-box and multi-selection */
/* Z00001381B2686: Jaini, Changed .x-boundlist-floating instead of .x-boundlist to keep fix for drop-down width 
	for combo-box issue & resolve multichoice width issue Z00002399B0524 */
.x-boundlist-floating {
	min-width: max-content !important;
}

/* Z00002399B0170: Valentin, fix check-box display issue for narrow data-grid rows */
.starlims-narrow-grid-row .x-grid-checkcolumn {
	top: 1px !important;
}

/* Z00002399B0172: Valentin, fix icon display issue with narrow data-grid rows */
.starlims-narrow-grid-row img {
	vertical-align: middle !important;
}

/*Z00002399B0482: set the check-box cell to the same height as a regular cell*/
.x-grid-view .x-grid-checkcolumn-cell-inner {
	padding: 13px 14px 13px 14px !important;
}