@charset "utf-8";

@font-face {
	font-family: "Edelsans";
	src: url('https://qscdnstorage.blob.core.windows.net/container/fonts/edelsans.ttf.woff') format('woff');
	font-style: normal;
	font-weight: 400;
	font-display: block;
}

@layer default {
	:root[data-theme="light"] {
		/* background colors */
		--root-background-color: #EEF0F4;
		--root-tile-background-color: #ffffff;
		--root-tab-background-color: #e2e6ec;
		--root-icon-background-color: #e2e6ec;
	}

	:root[data-theme="silver"] {
		--root-background-color: #ffffff;
		--root-tile-background-color: #EEF0F4;
		--root-tab-background-color: #cfd6df;
		--root-icon-background-color: #cfd6df;
	}
	
	/* common colors for light and silver */
	:root[data-theme="light"],
	:root[data-theme="silver"] {
		/* a gradient of neutral colors to use for adjusting background and foreground shades based on the primary background color (--root-tile-background-color) */
		--root-color-neutral-0: hsl(from var(--root-tile-background-color) h var(--root-color-neutral-saturation-level) 100%);
		--root-color-neutral-50: hsl(from var(--root-tile-background-color) h var(--root-color-neutral-saturation-level) 95%);
		--root-color-neutral-100: hsl(from var(--root-tile-background-color) h var(--root-color-neutral-saturation-level) 90%);
		--root-color-neutral-200: hsl(from var(--root-tile-background-color) h var(--root-color-neutral-saturation-level) 80%);
		--root-color-neutral-300: hsl(from var(--root-tile-background-color) h var(--root-color-neutral-saturation-level) 70%);
		--root-color-neutral-400: hsl(from var(--root-tile-background-color) h var(--root-color-neutral-saturation-level) 60%);
		--root-color-neutral-500: hsl(from var(--root-tile-background-color) h var(--root-color-neutral-saturation-level) 50%);
		--root-color-neutral-600: hsl(from var(--root-tile-background-color) h var(--root-color-neutral-saturation-level) 40%);
		--root-color-neutral-700: hsl(from var(--root-tile-background-color) h var(--root-color-neutral-saturation-level) 30%);
		--root-color-neutral-800: hsl(from var(--root-tile-background-color) h var(--root-color-neutral-saturation-level) 20%);
		--root-color-neutral-900: hsl(from var(--root-tile-background-color) h var(--root-color-neutral-saturation-level) 10%);
		--root-color-neutral-950: hsl(from var(--root-tile-background-color) h var(--root-color-neutral-saturation-level) 5%);
		--root-color-neutral-1000: hsl(from var(--root-tile-background-color) h var(--root-color-neutral-saturation-level) 0%);
		
		--root-element-focus-color: #E7EAEC;
		--root-input-font-color: black;
		--root-label-font-color: black;
		--root-label-font-color-header: black;
		--root-label-font-inverted-color: white;
		--root-tile-box-shadow-color-x: rgba(0, 0, 0, .132);
		--root-tile-box-shadow-color-y: rgba(0, 0, 0, .108);

		--root-interaction-color: #fff;
		--root-interaction-disabled-color: #EEF0F4;
		--root-icon-disabled-background-color: var(--root-interaction-disabled-color);
		--root-icon-font-color: #344054;
		--root-input-background-color: var(--root-interaction-color);
		--root-input-border-color: #cbc7c7;
		--root-input-icons-background-color: transparent;
		--root-icon-border-color: #cbc7c747;

		--root-box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
		--root-box-border: 1px solid var(--input-border-color);
		--root-box-background-color: var(--root-input-background-color);
		--root-box-content-border: #dde2eb;

		--root-qwarning-text-color: #f4f6f8;

		--omnisearch-focus-background-color: var(--input-background-color);
		--omnisearch-focus-font-color: var(--root-input-font-color);

		--infobox-box-shadow-color: #919191;

		--jquery-ui-datepicker-background-color: var(--root-tile-background-color);
		--jquery-ui-datepicker-header-background-color: #e9e9e9;
		--jquery-ui-datepicker-header-buttons-filter: none;
		--jquery-ui-datepicker-date-buttons: #f6f6f6;

		--q3placeAppointmentInfo-bg-color: #f9ead7;

		input {
			color-scheme: light;
		}
	}

	:root[data-theme="dark"] {
		--root-background-color: rgba(37,36,35,1);
		--root-tile-background-color: rgb(50, 49, 48);
		--root-tab-background-color: rgba(255, 255, 255, 0.08);

		/* a gradient of neutral colors to use for adjusting background and foreground shades based on the primary background color (--root-tile-background-color) */
		--root-color-neutral-0: hsl(from var(--root-tile-background-color) h var(--root-color-neutral-saturation-level) 0%);
		--root-color-neutral-50: hsl(from var(--root-tile-background-color) h var(--root-color-neutral-saturation-level) 5%);
		--root-color-neutral-100: hsl(from var(--root-tile-background-color) h var(--root-color-neutral-saturation-level) 10%);
		--root-color-neutral-200: hsl(from var(--root-tile-background-color) h var(--root-color-neutral-saturation-level) 20%);
		--root-color-neutral-300: hsl(from var(--root-tile-background-color) h var(--root-color-neutral-saturation-level) 30%);
		--root-color-neutral-400: hsl(from var(--root-tile-background-color) h var(--root-color-neutral-saturation-level) 40%);
		--root-color-neutral-500: hsl(from var(--root-tile-background-color) h var(--root-color-neutral-saturation-level) 50%);
		--root-color-neutral-600: hsl(from var(--root-tile-background-color) h var(--root-color-neutral-saturation-level) 60%);
		--root-color-neutral-700: hsl(from var(--root-tile-background-color) h var(--root-color-neutral-saturation-level) 70%);
		--root-color-neutral-800: hsl(from var(--root-tile-background-color) h var(--root-color-neutral-saturation-level) 80%);
		--root-color-neutral-900: hsl(from var(--root-tile-background-color) h var(--root-color-neutral-saturation-level) 90%);
		--root-color-neutral-950: hsl(from var(--root-tile-background-color) h var(--root-color-neutral-saturation-level) 95%);
		--root-color-neutral-1000: hsl(from var(--root-tile-background-color) h var(--root-color-neutral-saturation-level) 100%);
		
		--root-element-focus-color: rgb(34, 59, 89);
		--root-input-font-color: rgba(255, 255, 255, 0.95);
		--root-label-font-color: rgba(255, 255, 255, 0.95);
		--root-label-font-color-header: rgb(255, 255, 255);
		--root-label-font-inverted-color: black;
		--root-tile-box-shadow-color-x: rgba(0, 0, 0, .4);
		--root-tile-box-shadow-color-y: rgba(0, 0, 0, .32);
		
		--root-icon-background-color: rgba(255, 255, 255, 0.18);
		--root-icon-font-color: rgba(255, 255, 255, 0.95);
		--root-input-background-color: rgb(50, 49, 48);
		--root-input-border-color: rgba(255, 255, 255, 0.4);
		--root-input-icons-background-color: #313131;
		--root-icon-border-color: rgba(255, 255, 255, 0.2);

		--root-box-shadow: 5px 5px 10px rgba(255, 255, 255, 0.2);
		--root-box-border: 1px solid #555;
		--root-box-background-color: #333;
		--root-box-content-border: #444;
		--root-interaction-disabled-color: #bfbfbf90;

		--root-qwarning-text-color: black;

		--omnisearch-focus-background-color: var(--root-interaction-disabled-color);
		--omnisearch-focus-font-color: var(--root-label-font-inverted-color);

		--infobox-box-shadow-color: #181818;

		--jquery-ui-datepicker-background-color: var(--root-tile-background-color);
		--jquery-ui-datepicker-header-background-color: var(--root-tab-background-color);
		--jquery-ui-datepicker-header-buttons-filter: invert(1);
		--jquery-ui-datepicker-date-buttons: transparent;

		--q3placeAppointmentInfo-bg-color: var(--root-tab-background-color);

		input {
			color-scheme: dark;
		}
	}
	
    :root {
		/* Set the amount of saturation from the source color to use in the neutral color palette. */
		--root-color-neutral-saturation-level: 3%;
		
		/* set global font size relative to browser default; allow users to scale fonts as they need in browser settings */
        --root-nav-font-size: 1em;
		--root-hover-opacity: 0.5;
		--root-button-pointer: pointer;
        
        /* tile spacing */
		--root-tile-gap: 4px;
		--root-tile-column-gap: 8px;
		--root-form-column-gap: 0.8rem;
		--root-tile-padding: 14px 16px 14px 16px;
		--root-tile-padding-half: 7px 8px 7px 8px;
		--root-subtab-gap: 2px;
		--root-tile-margin: 0 0 4px 0;
		--root-tile-box-shadow: 0 3px 7px 0 var(--root-tile-box-shadow-color-x), 0 1px 1px 0 var(--root-tile-box-shadow-color-y);

		/* decrease tile spacing for smaller screens */
		@media (max-height: 900px) {
			--root-tile-gap: 2px;
			--root-tile-column-gap: 2px;
			--root-form-column-gap: 0.7rem;
			--root-tile-margin: 3px;
			--root-tile-padding: 8px 10px 8px 10px;
			--root-tile-padding-half: 4px 5px 4px 5px;
			--root-subtab-gap: 1px;
		}
		
		/* and even more for screens that originates from the 70-80s */
		@media (max-height: 700px) {
			--root-tile-gap: 2px;
			--root-tile-column-gap: 2px;
			--root-form-column-gap: 0.6rem;
			--root-tile-margin: 1px;
			--root-tile-padding: 4px 6px 4px 6px;
			--root-tile-padding-half: 2px 3px 2px 3px;
			--root-subtab-gap: 0px;
		}
		
        --root-border-radius: 5px;
		--root-border-radius-card: 3px;
        
        --root-quick3-red: #cc0000;
        --root-confirma-green: #009607;
		
        /* icon styling */
        --root-icon-input-size: 14px;
        --root-icon-gap: 4px;
		--root-icon-big-gap: 8px;
		--root-icon-text-align: center;
		--root-icon-border-radius: 8px;
        
		--root-input-padding: 3px 7px 3px 6px;
        --root-icon-success-font-color: #fff;
        
        --font-size: 100%;
        --font-size--small: .6rem;
        --title__font-size: 1.5rem;
        --tooltip-delay: 500ms;
        --font-family: Arial, Helvetica, sans-serif;
        
        --toolbarbutton-font-size: 18px;
        --toolbarbutton-line-height: 30px;
        --toolbarbutton-icon-size: 32px;
        --toolbarbutton-text-aling: center;
        
        --root-icon-solid-font-weight: 900;
        --root-icon-regular-font-weight: 400;
        
        --root-state-color-info: #2F80ED;
        --root-state-color-success:  var(--root-confirma-green, #27AE60);
        --root-state-color-warning: #E2B93B;
        --root-state-color-error: var(--root-quick3-red, #EB5757);
		
		--root-input-height: 22px;
		--root-input-search-icon-svg-regular: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Pro 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc.--><path d="M368 208A160 160 0 1 0 48 208a160 160 0 1 0 320 0zM337.1 371.1C301.7 399.2 256.8 416 208 416C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208c0 48.8-16.8 93.7-44.9 129.1L505 471c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0L337.1 371.1z"/></svg>');
		--root-input-open-icon-svg-regular: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Pro 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc.--><path d="M384 80c8.8 0 16 7.2 16 16l0 320c0 8.8-7.2 16-16 16L64 432c-8.8 0-16-7.2-16-16L48 96c0-8.8 7.2-16 16-16l320 0zm64 16c0-35.3-28.7-64-64-64L64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-320zM160 144c-13.3 0-24 10.7-24 24s10.7 24 24 24l94.1 0L119 327c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l135-135L288 328c0 13.3 10.7 24 24 24s24-10.7 24-24l0-160c0-13.3-10.7-24-24-24l-152 0z"/></svg>');
		--root-input-border: 1px solid var(--root-input-border-color);

		--root-tab-border: 2px solid var(--root-confirma-green);
    }
}

/*#region Normalization */
/* ----------------------------------------------- NORMALIZATION ----------------------------------------------- */
@layer default {
	html {
		font-size: var(--font-size, 16px);
	}

	body {
		line-height: 1.5;
	}

body, span, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form,
fieldset, input, p, blockquote, th, td, hr, select, option, b {
	margin: 0;
	padding: 0;
	font-family: var(--font-family);
	font-size: 0.7rem;
	color: var(--root-label-font-color);
	background-color: transparent;
}

:root {
	--input-hover-bg-color: var(--root-element-focus-color);
	--font-awesome-latest: 'Font Awesome 6 Pro';
	--font-awesome-custom: 'Font Awesome Kit';
	--input-border-color: var(--root-input-border-color);
	--input-border-radius: 5px;
	--input-qwarning-color: #f5bc6a;
	--input-disabled-color: var(--root-interaction-disabled-color);
	--input-disabled-text-color: #a5a9b0;
	--paragraph-text-color: #555;
	--input-background-color: var(--root-input-background-color);
}

	address, caption, cite, code, dfn, em, strong, th, var, b {
		font-style: normal;
		font-weight: normal;
	}

	ol, ul {
		list-style: none;
	}

	fieldset, img {
		border: 0;
	}

	caption, th {
		text-align: left;
	}

	table {
		border-collapse: collapse;
		border-spacing: 0;
	}

	strong {
		font-weight: bold;
	}


	::-webkit-scrollbar-track {
		background-color: transparent;
	}

::-webkit-scrollbar {
	width: 7px;
	height: 7px;
}

::-webkit-scrollbar-thumb {
	background-color: #777;
	background-clip: padding-box;
	border-radius: var(--root-border-radius);
}

*:hover::-webkit-scrollbar-thumb {
	opacity: 0.7;
}

	.scrollbar-light {
		&::-webkit-scrollbar {
			width: 6px;
		}

		&::-webkit-scrollbar-thumb {
			border-left: 4px solid transparent;
			border-radius: 4px;
			background: #aaaaaa;
		}

		&:hover::-webkit-scrollbar-thumb {
			background: #999999;
		}
	}

	::-webkit-calendar-picker-indicator {
		margin-left: -15px;
	}
}
/*#endregion */

@layer app.base {
/* ----------------------------------------------- ALL ----------------------------------------------- */
html {
	width: 100%;
	height: 100%;
	background-color: #555;
	font-family: Arial;
	font-weight: normal;
	overflow: hidden;
}

body {
	height: 100%;
}

h2 {
	font-size: 120%;
	margin-bottom: 0.5em;
	margin-top: 0.5em;
	color: var(--root-label-font-color-header);
}

h3 {
	line-height: 20px;
	margin-bottom: 3px;
	color: var(--root-label-font-color-header);
}

p {
	margin-bottom: 0.7em;
	color: var(--root-label-font-color);
}

	p.text {
		color: var(--root-label-font-color);
	}

a {
	color: #47b;
	cursor: pointer;
}


select {
	border: 1px solid #777;
	border-radius: var(--root-border-radius);
}
	
	input:invalid {
		background-color: var(--root-state-color-error) !important;
		color: white !important;
	}
	
	input[type="checkbox"],
	input[type="radio"] {
		accent-color: var(--root-confirma-green);
	}
	
	input[type="color"] {
		border: 1px solid var(--input-border-color);
		flex: 1;
	}
	
	input[type="color"]:hover {
		cursor: pointer;
	}

a.button:hover {
	opacity: var(--root-hover-opacity);
	cursor: var(--root-button-pointer);
}	
	
a.button.small {
	min-width: 1em;
	padding: 0.1em 2% 0.1em 2%;
}

a.button.disabled {
	background-color: var(--input-disabled-color) !important;
	cursor: not-allowed;
	opacity: 1;
}

a.button.transparent {
	background-color: transparent;
}
	
	/*Pretty much the same as defined in GlobalMixin for icons, but since this file is not scss we can't use include (yet) */
	a.button.icon-button {
		font-family: var(--font-awesome-latest);
		color: var(--root-icon-font-color);
		border-radius: var(--root-icon-border-radius);
		background-color: var(--root-icon-background-color);
		cursor: pointer;
		justify-content: center;
		align-items: center;
		display: flex;
		height: var(--toolbarbutton-icon-size);
		width: var(--toolbarbutton-icon-size);
		font-size: var(--toolbarbutton-font-size);
	}

a.button:not(.icon-button),
.resetPasswordFormContainer button {
	background-color: #777;
	color: #eef;
	text-decoration: none;
	display: inline-block;
	padding: 0.1em 3% 0.1em 3%;
	min-width: 5.5rem;
	text-align: center;
	margin-bottom: 0.3em;
	line-height: 22px;
	border-radius: var(--input-border-radius);
}

	a.button.clear:not(.far) {
		background-image: url("../Images/clear_white.png");
		background-size: 100%;
		background-repeat: no-repeat;
	}

	a.button.open:not(.far) {
		background-image: url("../Images/right_arrow2.png");
		background-size: 100%;
		background-repeat: no-repeat;
	}

	a.button.edit:not(.far) {
		background-image: url("../Images/Icons/edit.png");
		background-size: 100%;
		background-repeat: no-repeat;
	}

	a.button.add:not(.far) {
		background-image: url("../Images/Icons/add.png");
		background-size: 100%;
		background-repeat: no-repeat;
	}

	a.button.import:not(.far) {
		background-image: url("../Images/Icons/import.png");
		background-size: 100%;
		background-repeat: no-repeat;
	}

	a.button.link:not(.far) {
		background-image: url("../Images/Icons/linkbtn.png");
		background-size: 100%;
		background-repeat: no-repeat;
	}

	a.button.import.right.select:not(.far) {
		width: 20px;
		position: absolute;
		right: 0;
		top: 0;
		min-width: inherit;
		padding: 0 0 0 0;
		height: 20px;
	}

	a.button.enterkey:not(.far) {
		font-weight: 800;
	}

div.searchInput a.button.showDropDown {
	background-image: url("../Images/icon-down-white.png");
	background-size: 100%;
	background-repeat: no-repeat;
}

	a.button.far {
		background-color: var(--root-icon-background-color);
		color: var(--root-icon-font-color);
	}
	
	/* This is defined as a mixin in GlobalMixin, changes here should be reflected in the mixin as well */
	a.button.text-value,
	a.button.multiviewbutton {
		background-color: var(--root-icon-background-color);
		border-radius: var(--root-border-radius);
		color: var(--root-label-font-color);
		padding-right: 8px;
		padding-left: 8px;
	}
	
	a.button.confirma-style {
		background-color: var(--root-confirma-green);
		color: var(--root-icon-success-font-color);
	}
	
i.color-circle {
	font-size: 10px;
	vertical-align: text-top;
	margin-right: 5px;
	margin-top: auto;
	margin-bottom: auto;
	font-family: var(--font-awesome-latest);
	font-weight: var(--root-icon-solid-font-weight);
	font-style: normal;
}

i.color-circle:before {
	content: "\f111";
}
	
	.qmultiviewtab {
		display: flex;
		gap: var(--root-icon-gap);
	}


a.button.touch {
	min-width: 5em;
	max-width: 5em;
	font-size: 14px;
}

	a.button.touch.numeric {
		min-width: 3em;
		width: 3em;
		height: 2em;
		font-size: 14px;
	}

	a.button.touch.larger {
		min-width: 7em;
		font-size: 14px;
	}



textarea {
	font-family: var(--font-family);
	background-color: var(--root-input-background-color);
	color: var(--root-label-font-color);
}

#Wrapper {
	display:flex;
	flex-direction: column;
	min-width: 400px;
	min-height: 100%;
	overflow: hidden;
	height: 100vh;
	background-color: var(--root-background-color);
	box-sizing: border-box;
	gap: var(--root-tile-gap);
	padding: var(--root-tile-padding-half);
}

#runsBestInChrome {
	font-size: 2.2em;
}

ul.context-menu-list.userstate-menu li.userstate-menu {
	padding-inline: 10px;
	padding-block: 3px;
}


ul.context-menu-list.userstate-menu li.userstate-menu > span {
	display: grid;
	grid-template-columns: 17px 1fr 13px;
}

ul.context-menu-list.userstate-menu li.userstate-menu span.qpImg {
	margin: auto 5px auto 0;
	width: 9px;
	height: 9px;
	border: 1px solid #909090;
}

ul.context-menu-list.userstate-menu li.userstate-menu span.qpActive {
	margin: auto 0;
	justify-self: center;
}

div.qDropdown ul.menu.profile {
	width: 200px;
	top: -2px;
	left: 4px;
	background-color: var(--root-box-background-color);
	border: var(--root-box-border);
	box-shadow: var(--root-box-shadow);
	border-radius: var(--root-border-radius-card);
}

	div.qDropdown ul.menu.profile li label.profileSearch {
		position: relative;
		display: block;
		height: 30px;
		width: 190px;
		background-color: #444;
		padding: 5px 5px 0 5px;
	}

		div.qDropdown ul.menu.profile li label.profileSearch input {
			position: absolute;
			background-color: #999;
			border: none;
			width: 190px;
			height: 25px;
		}

			div.qDropdown ul.menu.profile li label.profileSearch input.focused {
				background-color: #ddd;
			}

		div.qDropdown ul.menu.profile li label.profileSearch:after {
			opacity: 0.75;
			position: absolute;
			right: 10px;
			top: 5px;
			display: block;
			content: "";
			width: 25px;
			height: 25px;
			background-repeat: no-repeat;
			background-position: 2px -2px;
			background-image: url("../Images/searchicon.png");
		}

	div.qDropdown ul.menu.profile a.qpBtn {
		position: relative;
		display: block;
		padding-left: 5px;
		width: auto !important;
		margin-left: 0 !important;
		color: var(--root-label-font-color);
	}

	div.qDropdown ul.menu.profile li.current a,
	div.qDropdown ul.menu.profile li.current a:hover {
		background: url('../Images/check_gray.png') 98% 10% no-repeat;
		background-size: 10%;
	}

div.qDropdown ul.notifications li a {
	text-indent: 0;
	line-height: 1.3em;
}

div.qDropdown ul.notifications li {
	padding: 0.3em 0.8em 0.3em 0.8em;
}


@media screen and (max-width:520px) {
	#Header b.name {
		display: none;
	}
}

#ContentWrapper {
	display: flex;
	box-sizing: border-box;
	flex: 1;
	overflow-y: hidden;
	column-gap: var(--root-tile-column-gap);
}

#ContentWrapper.full-screen {
	height: 100%;
}

#Content {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	overflow: auto;
	gap: var(--root-tile-gap);
}
	

ul.ui-autocomplete {
	z-index: 9999;
	max-height: 200px;
	overflow-y: auto;
	overflow-x: hidden;
}

div.ui-datepicker.ui-widget {
	z-index: 9999;
}

span.arrow {
	background-repeat: no-repeat;
	display: inline-block;
	vertical-align: top;
	cursor: pointer;
}

	span.arrow.small {
		width: 24px;
		height: 24px;
	}

		span.arrow.small.left {
			background-image: url("../Images/Icons/24/arrow_left.png");
		}

		span.arrow.small.right {
			background-image: url("../Images/Icons/24/arrow_right.png");
		}

		span.arrow.small.up {
			background-image: url("../Images/Icons/24/arrow_up.png");
		}

		span.arrow.small.down {
			background-image: url("../Images/Icons/24/arrow_down.png");
		}

span.marker {
	background-color: Yellow;
}

.highlightedbackground {
	background-color: #CFDADD;
}

/* placeholders */
.placeholder {
	position: relative;
	margin-bottom: 4px;
	border: 1px dashed #333;
	height: 24px;
	background: transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAADklEQVQImWNgQAVSZHAADXgAaQuCV7gAAAAASUVORK5CYII=) repeat;
	text-align: center;
}

	.placeholder.category {
		height: 96px;
	}

/* ----------------------------------------------- Other menus ----------------------------------------------- */
#menuDragger {
	width: 148px;
	padding-bottom: 0.1em;
	padding-left: 1em;
	line-height: 24px;
	max-height: 24px;
	min-height: 24px;
	font-family: var(--font-family);
	cursor: pointer;
	margin: 0;
	border: 1px dashed #333;
	z-index: 99999;
}

ul.menu {
	display: none;
}

div.qDropdown ul.menu.power {
	margin-left: -5em;
	background-color: #444;
	border: none;
	padding-bottom: 5px;
	top: -2px;
	width: 110px;
}

	div.qDropdown ul.menu.power a {
		color: #ddd;
	}

		div.qDropdown ul.menu.power a:hover {
			background-color: #555;
			color: #fff;
		}

div.qDropdown {
	z-index: 1500;
}

	/* ------- qDropdown override -------- */
	div.qDropdown a.checked {
		background-image: url('../Images/Icons/24/check_black.png');
		background-repeat: no-repeat;
		text-indent: 24px;
	}

	div.qDropdown a.unchecked {
		text-indent: 24px;
	}



/* ---- tab override ----- */
.qDialog .centerme {
	margin: 0 auto;
	width: 100%;
	text-align: center;
	padding-top: 40px;
	padding-bottom: 40px;
	font-weight: bold;
}

.qDialog.centerQDialog {
	top: 40%;
}

.qDialog.notQuiteCenterQDialog {
	top: 15%;
}

#Content ul.qTabButtons,
.qDialog ul.qTabButtons {
	background-color: transparent;
	padding-left: 0;
	box-sizing: border-box;
	contain: content;
	gap: var(--root-subtab-gap);
}

#Content.full-screen ul.qTabButtons.root {
	display: none !important;
}

#Content ul.qTabButtons li.dirty > p {
	font-style: italic;
}

#Content ul.qTabButtons li > a {
	display: inline;
}

	#Content ul.qTabButtons li.dirty > p:before {
		content: '* ';
		color: var(--root-label-font-color);
	}


ul.qTabButtons {
	min-height: 28px;
}


/*When using overflow/compact/scrollmode on root tabs*/
#Content ul.qTabButtons.overflow,
#Content .applicationTab ul.qTabButtons,
.qDialog ul.qTabButtons.overflow,
.qDialog .applicationTab ul.qTabButtons {
	display: inline-flex;
	overflow-x: auto;
}

	#Content .qTabButtons.root.full-screen {
		display: none;
	}

	#Content ul.qTabButtons.root {
		border-radius: var(--root-border-radius);
		background-color: var(--root-tile-background-color);
		padding: var(--root-tile-padding-half);
		box-shadow: var(--root-tile-box-shadow);
		gap: var(--root-tile-gap);
		margin: var(--root-tile-margin);
	}
	
	#Content .subTabsWrapper.vertical ul.qTabButtons,
	.qDialog .subTabsWrapper.vertical ul.qTabButtons {
		padding: var(--root-tile-padding-half);
		background-color: var(--root-tile-background-color);
		border-radius: var(--root-border-radius);
		box-shadow: var(--root-tile-box-shadow);
		margin: var(--root-tile-margin);
	}
	
	#Content ul.qTabButtons.root:not(.overflow) {
		display: flex;
		flex-wrap: wrap;
	}

	/*Correct for horizontal scrollbar having invisible left border*/
	#Content ul.qTabButtons.overflow::-webkit-scrollbar-thumb {
		border-left: 0 solid rgba(0, 0, 0, 0);
		background-color: #999;
		border-top: 1px solid rgba(0, 0, 0, 0);
	}

	#Content ul.qTabButtons.overflow:hover::-webkit-scrollbar-thumb {
		background-color: #777;
	}

#Content .subTabsWrapper ul.qTabButtons.overflow::-webkit-scrollbar-track {
	background-color: #eee;
}


#Content ul.qTabButtons.overflow li,
#Content .applicationTab ul.qTabButtons li {
	flex-shrink: 0;
	display: inline-flex;
}

	#Content ul.qTabButtons.overflow li:not(.active),
	#Content .applicationTab ul.qTabButtons li:not(.active) {
		display: flex;
		justify-content: space-between;
		line-height: 1em;
		min-width: 6em;
	}


#Content div.qTabPane.root {
	overflow: auto;
	box-sizing: border-box;
	flex: 1;
	background-color: var(--root-background-color);
}

	#Content div.qTabPane.root > div.applicationTab {
		contain: content;
	}

#Content div.qTabPane,
.qDialog div.qTabPane {
	background-color: #f9f9f9;
	contain: content;
}

#Content div.qTabPane.noContain {
	contain: none;
}

	#Content div.qTabPane > div,
	.qDialog div.qTabPane > div {
		box-sizing: border-box;
		height: 100%;
	}
	
	#Content .subTabsWrapper:not(.subTabsWrapperTop) .qTabPane > div,
	.qDialog .subTabsWrapper:not(.subTabsWrapperTop) .qTabPane > div {
		padding: var(--root-tile-padding-half);
		border-radius: var(--root-border-radius);
	}
	

#Content ul.qTabButtons li,
.qDialog ul.qTabButtons li {
	height: 1.5rem;
	max-width: 12rem;
	position: relative;
	overflow: hidden;
	padding-left: 9px;
	box-sizing: border-box;
	border-radius: var(--root-border-radius);
	line-height: 1.2;
	user-select: none;
	background-color: var(--root-tab-background-color);
	display: flex;
}


	#Content ul.qTabButtons li p,
	.qDialog ul.qTabButtons li p {
		font-size: 0.75rem;
		color: var(--root-label-font-color);
		text-overflow: ellipsis;
		white-space: nowrap;
		display: inline-block;
		max-width: 13em;
		margin-right: 0.5em;
		flex: 1;
		overflow: hidden;
		margin-bottom: 0;
	}

	#Content ul.qTabButtons li.active,
	.qDialog ul.qTabButtons li.active {
		color: var(--root-label-font-color);
		border-bottom: var(--root-tab-border);
	}

		#Content ul.qTabButtons li.active p,
		.qDialog ul.qTabButtons li.active p {
			font-weight: 700;
		}

	#Content ul.qTabButtons li i.close,
	.qDialog ul.qTabButtons li i.close {
		color: var(--root-label-font-color);
	}

		#Content ul.qTabButtons li i.close:hover,
		.qDialog ul.qTabButtons li i.close:hover {
			font-weight: bold;
			opacity: 1;
		}


	#Content ul.qTabButtons li:hover > p,
	.qDialog ul.qTabButtons li:hover > p {
		color: var(--root-confirma-green);
	}



body li.ui-sortable-helper {
	display: flex !important;
	background-color: #666;
	height: 20px !important;
	justify-content: center;
	padding: .2rem .5rem;
	border-radius: .3rem;
}

body li.ui-sortable-helper a {
	align-self: center;
	color: white;
	text-decoration: none;
	font-size: 0.8rem;
	white-space: nowrap;
}

body li.ui-sortable-helper a u {
	text-decoration: none;
}

/* ------ Sub tabs override ------ */

	#Content div.subTabsWrapper ul.qTabButtons li a,
	.qDialog div.subTabsWrapper ul.qTabButtons li a {
		color: var(--root-label-font-color);
	}

	#Content div.subTabsWrapper ul.qTabButtons li:hover,
	.qDialog div.subTabsWrapper ul.qTabButtons li:hover {
		opacity: 0.7;
	}

div.subTabsWrapper {
	display: flex;
	flex-direction: column;
}

	div.subTabsWrapper.overflow {
		overflow-y: auto;
		flex: 1;
	}
	
	div.subTabsWrapper.overflow:not(.vertical) {
		height: 100%;
		gap: var(--root-tile-gap);
	}
	
	#Content div.subTabsWrapper.overflow:not(.vertical) > ul,
	.qDialog div.subTabsWrapper.overflow:not(.vertical) > ul {
		padding: var(--root-tile-padding-half);
		background-color: var(--root-tile-background-color);
		border-radius: var(--root-border-radius);
		gap: var(--root-tile-gap);
	}

	div.subTabsWrapper.overflow .qTabPane {
		flex: 1;
		overflow-y: auto;
	}
	
	/* Removing padding in nested subtabs */
	#Content .view div.subTabsWrapper div.subTabsWrapper.overflow:not(.vertical) > ul,
	#Content .view div.subTabsWrapper div.subTabsWrapper.overflow:not(.vertical) .qTabPane > div,
	/*
	*	This is the most specific selector in history. 
	*	Mainly used to remove padding in the stock tab in sales view when we use vertical tabs and do not display the tabset. 
	*/
	#Content .view div.subTabsWrapper div.subTabsWrapper.overflow.vertical > ul[style="display: none;"] + .qTabPane > div {
		padding: 0;	
	},

ul li[data-qtabhotkeytext].showhotkey:not(.active):after {
	content: attr(data-qtabhotkeytext);
	position: absolute;
	text-align: center;
	right: -4px;
	top: -6px;
	padding: 2px 4px 1px 1px;
	background: var(--root-state-color-info);
	color: #ffffff;
	z-index: 9;
	font-size: 1em;
	height: 16px;
	line-height: 20px;
	border-radius: 5px;
	border: 2px solid #47b;
	min-width: 5em;
}


#Content div.subTabsWrapper ul.qTabButtons li.active.subTab,
.qDialog div.subTabsWrapper ul.qTabButtons li.active.subTab {
	background-color: #d6d6d6;
}

#Content div.subTabsWrapper div.qTabPane,
.qDialog div.subTabsWrapper div.qTabPane {
	background-color: var(--root-tile-background-color);
	border-radius: var(--root-border-radius);
}


	#Content div.subTabsWrapper div.qTabPane:not(.details),
	.qDialog div.subTabsWrapper div.qTabPane:not(.details) {
		box-shadow: var(--root-tile-box-shadow);
		box-sizing: border-box;
		margin: var(--root-tile-margin);
	}

#Content div.subTabsWrapper.vertical div.qTabPane div.subTabsWrapper.vertical {
	gap: 0;
}

#Content div.subTabsWrapper.vertical div.qTabPane div.subTabsWrapper.vertical ul.qTabButtons {
	border-radius: 0;
	background-color: var(--root-tile-background-color);
	margin: 0;
}

#Content div.subTabsWrapper.vertical div.qTabPane div.subTabsWrapper.vertical div.qTabPane {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	margin: 0;
}

/* ----- Sub tabs verticle ----- */


#Content div.subTabsWrapper.vertical,
.qDialog div.subTabsWrapper.vertical {
	flex-direction: row;
	background-color: var(--root-background-color);	
	border-radius: var(--root-border-radius);
	column-gap: var(--root-tile-column-gap);
	min-height: 10em;
}

	#Content div.subTabsWrapper.vertical ul.qTabButtons .qTabSearch.wrapper,
	.qDialog div.subTabsWrapper.vertical ul.qTabButtons .qTabSearch.wrapper {
		margin-bottom: 0.25em;
		margin-top: 0.5em;
		display: flex;
		border-bottom: 1px solid #80808057;
	}

	#Content div.subTabsWrapper.vertical.collapsed > ul.qTabButtons .qTabSearch.wrapper,
	.qDialog div.subTabsWrapper.vertical.collapsed > ul.qTabButtons .qTabSearch.wrapper {
		flex: 1;
	}

	#Content div.subTabsWrapper.vertical ul.qTabButtons input.qTabSearch,
	.qDialog div.subTabsWrapper.vertical ul.qTabButtons input.qTabSearch {
		margin-left: 2px;
		padding: 0.25em 0 0.25em 0.2em; 
		line-height: 1em;
		border: none;
		background-color: transparent;
		font-size: medium;
		flex: 1;
	}

		#Content .subTabsWrapper.vertical ul.qTabButtons input.qTabSearch:focus,
		.qDialog .subTabsWrapper.vertical ul.qTabButtons input.qTabSearch:focus {
			outline-style: none;
		}

	#Content div.subTabsWrapper.vertical ul.qTabButtons button.qTabSearch,
	.qDialog div.subTabsWrapper.vertical ul.qTabButtons button.qTabSearch {
		color: var(--root-label-font-color);
		line-height: 1em;
		border: none;
		border-radius: 4px;
		cursor: pointer;
		outline: none;
		font-size: small;
		background-color: transparent;
	}

		#Content div.subTabsWrapper.vertical ul.qTabButtons button.qTabSearch:hover,
		.qDialog div.subTabsWrapper.vertical ul.qTabButtons button.qTabSearch:hover {
			background-color: darkgray;
		}

	#Content div.subTabsWrapper.vertical ul.qTabButtons,
	.qDialog div.subTabsWrapper.vertical ul.qTabButtons {
		display: flex;
		flex-direction: column;
		gap: var(--root-subtab-gap);
		overflow-y: auto;
		min-width: 200px;
	}

#Content div.subTabsWrapper.vertical.collapsed ul.qTabButtons,
.qDialog div.subTabsWrapper.vertical.collapsed ul.qTabButtons {
	min-width: 20px;
}

		#Content div.subTabsWrapper.vertical ul.qTabButtons li,
		.qDialog div.subTabsWrapper.vertical ul.qTabButtons li {
			margin-top: 0;
			background-color: transparent;
			height: auto;
			padding: 0.25em 1em 0.25em 0.25em;
		}

	#Content div.subTabsWrapper.vertical ul.qTabButtons li.hidden,
	.qDialog div.subTabsWrapper.vertical ul.qTabButtons li.hidden{
		display: none;
	}

		#Content div.subTabsWrapper.vertical ul.qTabButtons li,
		#Content div.subTabsWrapper.vertical ul.qTabButtons li.active,
		.qDialog div.subTabsWrapper.vertical ul.qTabButtons li,
		.qDialog div.subTabsWrapper.vertical ul.qTabButtons li.active {
			padding: 5px;
		}

			#Content div.subTabsWrapper.vertical ul.qTabButtons li.active,
			.qDialog div.subTabsWrapper.vertical ul.qTabButtons li.active {
				background-color: var(--root-tab-background-color);
			}

				#Content div.subTabsWrapper.vertical ul.qTabButtons li:hover,
				.qDialog div.subTabsWrapper.vertical ul.qTabButtons li:hover {
					background-color: var(--root-tab-background-color); 
					opacity: 0.7;
				}

			#Content div.subTabsWrapper.vertical ul.qTabButtons li p,
			.qDialog div.subTabsWrapper.vertical ul.qTabButtons li p {
				color: var(--root-label-font-color);
				display: inline-block;
				text-wrap: wrap;
				white-space: normal;
				text-overflow: clip;
				font-size: var(--root-nav-font-size);
			}

/* ----- qfield override ----- */

label.qField b {
	background-color: transparent;
}

label.qField:hover {
	background-color: var(--input-hover-bg-color);
}


label.qField.external b {
	background-color: transparent;
}

label.qField b.hasCard,
label.qlabel b.hasCard {
	cursor: pointer;
}

label.qField b.hasCard::after,
label.qlabel b.hasCard::after {
	font-family: 'Material Icons';
	content: 'info';
}

label.qField.external.medium b {
	left: -6.6em;
	width: 6.2em;
}

label.qField.external.medium {
	margin-left: 6.5em;
}

	label.qField.external b {
		color: var(--root-label-font-color);
	}

label.qField.external b.indented, 
label.qlabel b.indented {
    margin-left: 0.5em;
}

label.qField.external.nobox,
label.qlabel.nobox > input {
	border: none !important;
	background-color: transparent;
}

label.qField.external.disabled,
label.qField.external[disabled],
label.qField.external[disabled="true"] {
	background-color: lightgray;
}

label.qField.external.nobox p {
	position: relative;
	line-height: 1.5em;
	margin-bottom: 0;
}

label.qField.external.nobox input {
    margin-top: 0.25em;
}

label.qField.noLabelMessage b {
	position: relative;
	top: 0.15em;
}

#Header label.qField,
label.qField {
	color: #333;
	border: 1px solid var(--input-border-color);
	box-shadow: none;
	min-height: 18px;
	margin-bottom: 3px;
	border-radius: var(--input-border-radius);
}

	label.qField input {
		bottom: 0.1em;
		outline: 0;
	}

		label.qField input.sumtotal {
			font-weight: bold;
		}

label input.required {
	background-color: var(--root-state-color-error) !important;
}

.splitFieldAuto {
	display: flex;
	flex-flow: row;
	height: 25px;
	gap: 3px;
}

.splitFieldAuto > :first-child {
	width: 65%;
}

.splitFieldAuto > :last-child {
	flex: 35%;
}

/* different width values for small columns */
.flexBasis.medium .splitFieldAuto > :first-child {
	width: 75%;
}

.flexBasis.medium .splitFieldAuto > :last-child {
	width: 25%;
}

.splitFieldAuto span.ui-widget,
.splitFieldAuto select,
.splitFieldAuto input {
	width: inherit;
}

.splitFieldFlex {
	display: flex;
	flex-flow: row;
}

	.splitFieldFlex label.qField.left {
		flex-flow: column;
		flex-basis: 50%;
		min-width: 5.4em;
	}

	.splitFieldFlex label.qlabel.left input {
		width: 45%;
	}

	.splitFieldFlex label.qField.right {
		flex-flow: column;
		flex-basis: 50%;
		min-width: 5em;
		margin-left: 0.5em;
	}

	.splitFieldFlex label.qlabel.right {
		flex-basis: 50%;
		min-width: 5em;
		margin-left: 0.5em;
	}

	.splitFieldFlex label.qField.left.xlarge {
		flex-basis: 65%;
	}

	.splitFieldFlex label.qField.right.xlarge,
	.splitFieldFlex label.qlabel.right.xlarge {
		flex-basis: 66%;
	}

	.splitFieldFlex label.field.qCheckbox.medium {
		flex-basis: 30%;
		flex-direction: row-reverse;
		margin-top: 5px;
	}

	.splitFieldFlex label.field.qCheckbox.large {
		flex-basis: 40%;
		flex-direction: row-reverse;
		margin-top: 5px;
	}

	.splitFieldFlex dropdownlist {
		flex-basis: 62%;
		min-width: 5em;
		margin-left: 0.5em;
	}

	.splitFieldFlex label:not(.notext) span {
		flex-basis: 62%;
	}

	.splitFieldFlex.small-first-child label:first-child {
		flex-basis: 56% !important;
		width: 30%;
	}

	.splitFieldFlex.small-first-child label.medium:last-child {
		flex-basis: 64% !important;
	}

.splitFieldFlex div.dropdownlist.large {
	flex-basis: 80%;
    min-width: 5em;
    margin-left: 0.5em;
}

label.qField input.postfix {
	width: 73%;
}

label.qField b.postfixvalue {
	left: 8.5em !important;
	width: 2.7em !important;
	text-align: right;
}

	label.qField b.postfixvalue.flex {
		left: 10em !important;
		margin-left: .5em;
	}

	label.qField.large b.postfixvalue.flex {
		margin-left:-1.4em
	}

a.button.indicator.notice {
	background-color: #ce9;
	color: #060;
	border-color: #aba;
}

.textAreaContainer textarea {
	resize: none;
	height: 300px;
	width: 400px;
}

div.textAreaContainer {
	height: 300px;
	width: 400px;
}

.scrollbox {
	max-height: 200px;
	max-width: 500px;
	overflow-y: scroll;
	overflow-x: hidden;
}

label.check {
	display: block;
}

	label.check b {
		color: #467;
	}

	label.check.xlarge b {
		width: 10.6em;
		display: inline-block;
	}

label.qField.numericfield.bold b {
	font-weight: bold
}

label.qField input.bold,
label.qField div.bold input {
	font-weight: bold;
}

/* ----- qGrid override ----- */
#Content div.qGrid > * {
	margin-left: 0;
	margin-right: 10px;
}

#Content div.qGrid {
	margin-left: 0;
	padding-top: 0.6em;
}

/* ----- qGridFlex ----- */
.qGridFlex {
	display: flex;
	flex-flow: row wrap;
	gap: var(--root-form-column-gap);
}

    .qGridFlex.compact label.field{
        margin-top: 2px;
    }

	.qGridFlex .flexBasis {
		display: flex;
		flex-shrink: 0;
		min-height: 2em;
	}

		.qGridFlex .flexBasis.column {
			flex-flow: column nowrap;
		}

		.qGridFlex .flexBasis.row {
			flex-flow: row nowrap;
			margin-right: 0;
			gap: .3rem;
		}

		.qGridFlex .flexBasis.xSmall {
			flex-basis: 10%;
			min-width: 10em;
		}

		.qGridFlex .flexBasis.small {
			flex-basis: 12.5%;
			min-width: 14.2em;
		}

			.qGridFlex .flexBasis.small.item {
				flex-basis: 48%;
				flex-shrink: 1;
			}

			.qGridFlex .flexBasis.small.noShrink {
				flex-basis: 20em;
				min-width: 20em;
			}

		.qGridFlex .flexBasis.superSmall.noShrink {
			flex-basis: 15em;
			min-width: 15em;
		}

		.qGridFlex .flexBasis.small input.numericfield {
			max-width: 90%;
		}

		.qGridFlex .flexBasis.small.prices {
			margin-right: 4em;
		}

		.qGridFlex .flexBasis.small.prices .icons {
			display: flex;
			margin-left: 13em;
		}

		.qGridFlex .flexBasis.small.prices .grossMargin .icons {
			margin-left: 6em;
		}

			.qGridFlex .flexBasis.small.prices .icons i {
				font-size: 16px;
				line-height: 18px;
				margin-left: .2rem;
				margin-right: .2rem;
				color: var(--root-icon-font-color);
			}

		.qGridFlex .flexBasis.medium {
			flex-basis: 17.5%;
			min-width: 22.5em;
		}

		.qGridFlex .flexBasis.medium.noShrink {
			flex-basis: 25em;
			min-width: 25em;
		}

		.qGridFlex .flexBasis.mediumRest {
			flex-basis: 68.5%;
			min-width: 30em;
			min-height: 10em;
		}

		.qGridFlex .flexBasis.mediumLarge {
			flex-basis: 27%;
			min-width: 25em;
		}

		.qGridFlex .flexBasis.large {
			flex-basis: 25%;
			min-width: 30em;
			max-width: 40em;
		}

		.qGridFlex .flexBasis.larger {
			flex-basis: 35%;
			min-width: 39em;
		}

		.qGridFlex .flexBasis.large.noShrink {
			flex-basis: 39em;
			min-width: 39em;
		}

		.qGridFlex .flexBasis.xlarge {
			flex-basis: 48%;
			min-width: 39em;
		}

        .qGridFlex .flexBasis.xlarge2split {
            flex-basis: 23.3%;
            min-width: 19.5em;
        }

		.qGridFlex .flexBasis.xxlarge {
			flex-basis: 60%;
			min-width: 50em;
		}

		.qGridFlex .flexBasis.xxxlarge {
			flex-basis: 100%;
			min-width: 75em;
		}

		.qGridFlex .flexBasis.topMargin {
			margin-top: 2.5em;
		}

		.qGridFlex .flexBasis.threeQuarter {
			flex-basis: 75%;
			min-width: 39em;
		}

		.qGridFlex .flexBasis.oneThird {
			flex-grow: 1;
		}

		.qGridFlex .flexBasis.twoThirds {
			flex-grow: 2;
		}

		.qGridFlex .flexBasis.dialog {
			flex-basis: 100%;
		}

/* ----- default qViewGrid----- */
	.qViewGrid {
		display: grid;
		gap: 0.5rem;
		grid-template-columns: 1fr 1fr;
	}

	.qViewGrid.gap1 {
		gap: 1rem;
	}

	.qViewGrid.fullHeight,
	.qViewGrid-rows.fullHeight {
		height: 100%;
	}

	.qViewGrid.threeCol {
		grid-template-columns: 1fr 1fr 1fr;
	}

	.qViewGrid.oneThird {
		grid-template-columns: 1fr 2fr;
	}

	.qViewGrid.twoThirds {
		grid-template-columns: 2fr 1fr;
	}

	.qViewGrid.twoFifths {
		grid-template-columns: 3fr 2fr;
	}

	.qViewGrid.sevenEights {
		grid-template-columns: 7fr 1fr;
	}

	.qViewGrid.threeFourths {
		grid-template-columns: 3fr 1fr;
	}

	.qViewGrid.oneFifth {
		grid-template-columns: 1fr 4fr;
	}

	.qViewGrid.oneFourth {
		grid-template-columns: 1fr 3fr;
	}

	.qViewGrid.oneThird {
		grid-template-columns: 1fr 2fr;
	}

	.qViewGrid-rows {
		display: grid;
		gap: .5rem;
		grid-template-rows: 1fr 1fr;
	}
		.qViewGrid-rows.one {
			grid-template-rows: 1fr;
		}
		.qViewGrid-rows.autoOne {
			grid-template-rows: auto 1fr;
		}
		.qViewGrid-rows.oneFifth {
			grid-template-rows: 1fr 4fr;
		}
		.qViewGrid-rows.threeOne {
			grid-template-rows: 3fr 1fr;
		}

	.qViewGrid.includeHeader {
		grid-template-rows: auto 1fr;
		row-gap: 0;
	}

	.qViewGrid.includeHeader h2 {
		grid-column: 1 / 3;
	}

	.qViewGrid.qMultiViewTab {
		grid-template-columns: 1fr;
		grid-template-rows: auto 1fr;
	}

	.qViewGrid.searchGrid {
		height: 100%;
		grid-template-columns: 1fr;
		grid-template-rows: minmax(min-content, max-content) auto;
		row-gap: 0.3em;
	}

/* ------------------------------------------------ VIEW SPECIFIC ---------------------------------------------- */

/* ACCOUNT */
div.login {
	max-width: 400px;
	background-color: var(--root-tile-background-color);
	margin: auto;
	padding: var(--root-tile-padding);
	border-radius: var(--root-border-radius);
}

	a.button.login,
	div.login b.forgot {
		padding: 4px;
		font-weight: 700;
		margin-top: 0.7em;
		display: block;
	}
	
	div.login label.check {
		margin-top: 1em;
	}

	div.login b.forgot {
		margin-top: 0.3em;
		text-align: center;
	}

		div.login b.forgot a {
			color: var(--root-confirma-green);
			text-decoration: none;
		}

div.pickClient {
	min-width: 400px;
	max-width: 400px;
	background-color: var(--root-tile-background-color);
	margin: 1.7em auto auto;
	padding: var(--root-tile-padding);
	border-radius: var(--root-border-radius);
	overflow-y: scroll;
	background-color: var(--root-tile-background-color);
	color: var(--root-label-font-color);
}

	div.pickClient > p {
		text-align: center;
	}


div.forgotPassword {
	max-width: 600px;
	padding: 2em 2em 1em 2em;
	background-color: var(--root-tile-background-color);
	margin: 1.7em auto auto;
}

	div.forgotPassword a.button.resetPassword {
		margin-top: 0.7em;
		margin-left: 8.3em;
	}

	div.forgotPassword p.message {
		margin-left: 8.3em;
	}

span.tooltiptext {
	visibility: hidden;
	width: 120px;
	background-color: #555;
	color: #fff;
	text-align: center;
	border-radius: 6px;
	padding: 5px 0;
	position: absolute;
	z-index: 1;
	bottom: 125%;
	left: 50%;
	margin-left: -60px;
	opacity: 0;
	transition: opacity 0.3s;
}

span.tooltiptext::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: #555 transparent transparent transparent;
}


	span.tooltiptext.show {
		visibility: visible;
		opacity: 1;
	}


#manageaccount {
	margin: 1em;
}

#PasswordStrengthIndicator {
	margin-left: 10.9em;
}

div.manageAccount div.setCulture {
	margin-top: 3em;
}

	.manageAccount div.setCulture .cultureOptions {
		gap: 0.2em;
	}

		.manageAccount div.setCulture .cultureOptions > :first-child {
			flex: 2;
		}

div.passwordRequirements {
	display: block;
	margin-bottom: 5em;
}

	div.passwordRequirements p.requirement,
	div.resetPasswordFormContainer fieldset .text.requirement {
		display: block;
		float: left;
		background-color: #ccc;
		padding-left: 0.4em;
		padding-right: 0.4em;
		margin-left: 0.1em;
		margin-right: 0.1em;
		border-radius: 0.2em;
	}


div.tasktext {
	color: #000;
	cursor: pointer;
}

.tasktext .textheader {
	z-index: 900;
}

	div.tasktext div.textheader:hover {
		opacity: 1.0;
		color: #47b;
	}

	div.tasktext span.expandable {
		float: left;
		margin-right: 0.2em;
	}

	div.tasktext span.createdBy {
		color: #AAA;
	}

ul.qTabButtons li.punchedInTask::before {
	content: '\f2f2';
	font-family: var(--font-awesome-latest);
	margin-right: 0.5em;
	color: var(--root-state-color-success);
}
	
div.view {
	overflow-x: hidden;
	box-sizing: border-box;
	flex: 1;
	height: inherit;
	display: flex;
	flex-direction: column;
	width: 100%;
	background-color: transparent;
	gap: var(--root-tile-gap);
}
	
/*NOTE! Also defined in GlobalMixin for scss usage*/
.tile-wrapper {
	border-radius: var(--root-border-radius);
	background-color: var(--root-tile-background-color);
	padding: var(--root-tile-padding-half);
	box-shadow: var(--root-tile-box-shadow);
	box-sizing: border-box;
	margin: var(--root-tile-margin);
}
	
.tile-wrapper.no-padding {
	padding: 0;
}
	
.tile-wrapper.no-border-radius {
	border-radius: 0;
}

/* ARTICLE */
div.view.article label.priority {
	width: 3em;
}

/* -------------------------------------------------Jquery UI Modifiers ------------------------------------------------*/

div.ui-resizable:not(.vertical-resize) {
	margin-bottom: 4px;
}

div.ui-resizable-handle {
	box-sizing: border-box;
	height: 3px;
	opacity: 0.7;
}

	div.ui-resizable-handle.ui-resizable-n {
		border-top: 2px dashed grey;
	}

	div.ui-resizable-handle.ui-resizable-n:hover {
		border-top: 3px dashed grey;
	}

	div.ui-resizable-handle.ui-resizable-s {
		border-bottom: 2px dashed grey;
	}

	div.ui-resizable-handle.ui-resizable-s:hover {
		border-bottom: 3px dashed grey;
	}

	div.ui-resizable-handle.ui-resizable-e {
		border-right: 2px dashed grey;
		height: 100%;
	}

	div.ui-resizable-handle.ui-resizable-e:hover {
		border-right: 3px dashed grey;
	}

	div.ui-resizable-handle.ui-resizable-w {
		border-left: 2px dashed grey;
		height: 100%;
	}

	div.ui-resizable-handle.ui-resizable-w:hover {
		border-left: 3px dashed grey;
	}

div.ui-datepicker {
	z-index: 9999 !important;
	background-color: var(--jquery-ui-datepicker-background-color) !important;
}

div.ui-datepicker .ui-datepicker-header {
	background-color: var(--jquery-ui-datepicker-header-background-color) !important;
}

div.ui-datepicker .ui-datepicker-header .ui-datepicker-prev,
div.ui-datepicker .ui-datepicker-header .ui-datepicker-next {
	filter: var(--jquery-ui-datepicker-header-buttons-filter);
}

div.ui-datepicker .ui-datepicker-calendar .ui-state-default {
	background-color: var(--jquery-ui-datepicker-date-buttons);
	border: none;
	color: var(--root-label-font-color);
}

div.ui-datepicker .ui-datepicker-calendar .ui-state-default.ui-state-highlight {
	background-color: var(--_cell-selected-background-color);
}

div.ui-datepicker .ui-datepicker-calendar .ui-state-default:hover {
	background-color: var(--_cell-hover-background-color);
}

.ui-corner-all {
	border-radius: 0;
}

.ui-widget .ui-state-focus {
	background: #EEE;
}

span.ui-selectmenu-button:hover,
span.ui-selectmenu-button {
	background-color: var(--root-input-background-color);
	height: 1em;
	border: solid 1px var(--input-border-color);
	border-radius: var(--input-border-radius);
	padding: 0.5em 1em 0.3em 0.4em;
}

	span.ui-selectmenu-button:not(.disabled):hover {
		background-color: var(--input-hover-bg-color);
	}

	span.ui-selectmenu-button.disabled:hover {
		cursor: default;
	}

	span.ui-selectmenu-button .ui-selectmenu-icon.ui-icon:hover,
	span.ui-selectmenu-button:hover .ui-selectmenu-icon.ui-icon,
	span.ui-selectmenu-button .ui-selectmenu-icon.ui-icon {
		background-image: none;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	span.ui-selectmenu-button .ui-selectmenu-icon.ui-icon:before {
		content: "\f078";
		font-family: var(--font-awesome-latest);
		text-indent: 0; /* this is set to -99999px in jquery-ui sheets... */
	}


div.ui-selectmenu-open {
	z-index: 9999;
}

/*Group styling*/
.ui-selectmenu-menu .ui-menu li.ui-selectmenu-optgroup.ui-menu-divider {
	border-top: 1px solid rgb(153 153 153 / 90%);
	font-size: 1.5em;
}

	div.ui-selectmenu-open .ui-menu,
	div.optionWrapper,
		/* SearchInput autocomplete dropdown */
	ul.ui-menu.ui-autocomplete {
		max-height: 50vh;
		background-color: var(--root-box-background-color);
		color: var(--root-input-font-color);
		border-radius: var(--root-border-radius-card);
		padding: 6px 0 6px 0;
	}

	/*AutoComplete for SearchInput has a bit smaller max height*/
	ul.ui-menu.ui-autocomplete {
		max-height: 200px;
	}
	div.ui-selectmenu-open li.ui-menu-item > div,
	ul.ui-menu.ui-autocomplete li.ui-menu-item > div {
		padding: 6px 11px 5px 9px;
		font-size: larger;
	}
	
		div.ui-selectmenu-open li.ui-menu-item > div.ui-state-active,
		div.ui-selectmenu-open li.ui-menu-item > div:hover, 
			/* SearchInput autocomplete dropdown */
		ul.ui-menu.ui-autocomplete li.ui-menu-item > div.ui-state-active {
			background-color: var(--root-element-focus-color);
			color: var(--root-input-font-color);
			margin: 0;
			border: none;
		}

/* ------------------------------------------------ CUSTOM QUI MODIFIERS ---------------------------------------------- */
.qField select {
	width: 100%;
}

.qField textarea {
	width: 98%;
	height: 98%;
}

label.qField.readonly {
	background-color: #DDD;
}

	label.qField.readonly.focused {
		background-color: #DDD;
		color: #000;
		border-color: #777;
	}

div.qGrid div.compact {
	margin-top: 0;
	margin-bottom: 0;
}

label.qField {
	background-color: var(--root-input-background-color);
}


	label.qField input.half {
		width: 50%;
	}

label.qField.numericfield:not(.noMaxWidth) {
	max-width: 10em;
}

label.qField input.numericfield {
	text-align: right;
}

label.qField select {
	background-color: transparent;
	border: none;
	outline: 0;
}

label.qField input.password,
input.password {
	-webkit-text-security: disc;
}

label.qRadio input.radio {
    margin-right: 2px;
}

label.qRadio b {
    vertical-align: middle;
    position: relative;
    bottom: 0.3em;
}

div.double label.qField {
	display: inline-block;
	width: 18%;
	vertical-align: top;
}

	div.double label.qField.large {
		width: 21%;
	}

div.double > b {
	display: inline-block;
	margin-top: 0.2em;
	left: -8.4em;
	width: 8em;
}

div.view span.doubleticon {
	font-size: 2em;
	padding-left: 0.5em;
}

/* ------------------------------------------------toastr ------------------------------------------------ */
div.toast .toast-message {
	font-size: 1.5em;
}

div#toast-container > div {
	width: 450px;
	border-radius: 12px;
}

div#toast-container button {
	right: 0;
}

div.toast:hover div.toast-message, div.toast:hover div.toast-title {
	font-size: 1.6em;
}

div.toast.toast-custom {
	background-color: #333;
}

.toast.toast-success,
.toast.toast-success:hover {
	background-color: var(--root-state-color-success);
}

.toast.toast-info {
	background-color: var(--root-state-color-info);
}

.toast.toast-warning {
	background-color: var(--root-state-color-warning);
}

.toast.toast-error {
	background-color: var(--root-state-color-error);
}

/* QuickOutlookButton specific layout: */
div.qoutlookButton {
	overflow: hidden;
	width: 100%;
	margin-bottom: .2rem;
}

	div.qoutlookButton ul {
		min-width: 350px;
	}

	div.qoutlookButton li {
		float: left;
		-webkit-border-radius: 2px 2px 2px 2px;
		-moz-border-radius: 2px;
		border-radius: 2px 2px 2px 2px;
		position: relative;
		margin-right: 3px;
	}

		div.qoutlookButton li.label {
			color: #333;
			padding-right: 2em;
			padding-top: 0.3em;
			text-decoration: none;
			font-family: var(--font-family);
			font-size: 1.2em;
			font-weight: normal;
		}

		div.qoutlookButton li.closeable {
			color: #fff;
			background-color: #fff;
			padding-right: 2em;
		}

		div.qoutlookButton li.regular {
			border: 1px solid #dcdcdc;
			-webkit-border-radius: 5px 5px 5px 5px;
			-moz-border-radius: 5px;
			border-radius: 5px 5px 5px 5px;
		}

	div.qoutlookButton a {
		display: inline-block;
		padding: 0.5em 1em;
		background-color: transparent;
		text-decoration: none;
	}

		div.qoutlookButton a.close {
			background: url("../Images/close-icon.png") no-repeat center;
			width: 0;
			height: 0;
			overflow: hidden;
			padding: 16px 16px 0 0;
			display: block;
			position: absolute;
			right: 0.7em;
			top: 0.5em;
		}

			div.qoutlookButton a.close:hover {
				opacity: var(--root-hover-opacity);
				cursor: var(--root-button-pointer);
			}

	div.qoutlookButton li.closeable:hover {
		text-decoration: none;
		background-color: #eee;
	}

div.toast-badge {
	position: absolute;
	right: 0.5rem;
	bottom: 0.4rem;
	background-color: white;
	color: black;
	width: 1.4rem;
	height: 1.4rem;
	text-align: center;
	border-radius: 12px;
	line-height: 1.4rem;
	font-weight: 700;
	border: 1px solid lightgray;
}

/* End QuickOutlookButton specific layout */

/* ----------------------------------------------------qmultiviewtab ----------------------------------------- */

div.qmultiviewtab a.button:not(.showDropDown) {
	padding: 0 0.5em 0 0.5em !important;
}

	a.button.selected {
		border-bottom: var(--root-tab-border);
	}

/* ----------------------------------------------------qmultiviewtab end ------------------------------------- */

/* ----------------------------------------------------------qsearchblock -----------------------------------------------------------*/
div.qsearchblock {
	position: relative;
}

	div.qsearchblock a.button {
		position: absolute;
		right: 4px;
		top: 3px;
		padding: 0 0 0 0;
		min-width: inherit;
		width: 16px;
		height: 16px;
	}
	
	div.qsearchblock a.button.search {
		background-image: var(--root-input-search-icon-svg-regular);
		background-color: var(--root-input-background-color);
		background-size: var(--root-icon-input-size);
		background-repeat: no-repeat;
	}
	
	div.qsearchblock a.button.search:hover {
		opacity: var(--root-hover-opacity);
		cursor: var(--root-button-pointer);
	}
	
	div.qsearchblock a.button.open { 
		background-image: var(--root-input-open-icon-svg-regular);
		background-color: var(--root-input-background-color);
		background-size: var(--root-icon-input-size);
	}

		div.qsearchblock a.button.halfsize.left {
			right: 22px;
		}

		div.qsearchblock a.button.halfsize.farleft {
			right: 44px;
		}

div.qDropdown ul.menu {
	color: #FFF;
	background-color: #777;
	border: medium none;
	margin-left: -9em;
	padding-bottom: 5px;
}

	div.qDropdown ul.menu.large {
		margin-left: -11em;
	}

	div.qDropdown ul.menu :hover {
		background-color: var(--root-element-focus-color);
	}

	div.qDropdown ul.menu li a {
		text-decoration: none;
	}

div.qDropdown a.bold {
	font-weight: bold;
}

.horizontalCheckboxes {
	display: flex;
	width: 100%;
}

	.horizontalCheckboxes .label {
		line-height: 4em;
	}

	.horizontalCheckboxes label.checkboxFlex {
		margin-right: .5rem;
	}

	.horizontalCheckboxes .checkboxGroup {
		display: flex;
		margin-left: 4em;
	}
	.horizontalCheckboxes .checkboxGroup > label.qlabel.topText {
		display: flex;
		flex-direction: column-reverse;
	}
	
	.horizontalCheckboxes .checkboxGroup > label.qlabel.topText > :first-child {
		text-indent: 2px;
		min-width: 0;
	}
/* Start block specific layout */
#Content div.block_header {
	background-color: #eee;
	padding-top: 0.3em;
	margin-top: 0.4em;
	font-weight: bold;
	font-size: 15px;
	height: 24px;
}

#Content div.block_header span:not(.material-icons) {
	line-height: 15px;
	margin: -3px 0 3px;
}

#Content div.block_header div.block_header_text {
	font-size: 12px;
	line-height: 24px;
	margin-right: 1rem;
	float: left;
}

    #Content div.block_header span.block_header_text {
        display: inline-block;
        cursor: pointer;
        font-size: 12px;
        padding-right: 30px;
    }

		#Content div.block_header span.block_header_text.purchase {
			margin-left: 0.5em;
			cursor: default;
		}

		#Content div.block_header span.block_header_text.focustext {
			position: relative;
			bottom: 9px;
			right: 10px;
			padding-left: 0.3em;
			padding-right: 0.3em;
			border: 0 solid #D50;
			border-radius: 10%;
			cursor: text;
			color: #8C3407;
		}


	#Content div.block_header div.compact.toolbar.right {
		float: right;
		white-space: nowrap;
		display: inline-block;
		height: 24px;
	}

    #Content div.block_header a.block_header_dropdown {
        background-image: url("../Images/Icons/menu.png");
    }

	#Content div.block_header a.editblock {
		float: left;
		margin-right: 3px;
		margin-left: 7px;
	}

	#Content div.block_header input[type='checkbox'] {
		float: left;
		margin-top: 6px;
		display: inline-block;
		margin-left: 10px;
		/* scales the size of a checkbox up */
		-ms-transform: scale(1.4); /* IE */
		-moz-transform: scale(1.4); /* FF */
		-webkit-transform: scale(1.4); /* Safari and Chrome */
		-o-transform: scale(1.4); /* Opera */
		transform: scale(1.4);
	}

/* End block specific layout */


/* Start checkbox specific layout */
.field.qCheckbox {
	display: block;
	margin-bottom: 3px;
	margin-top: 7px;
	color: var(--root-label-font-color);
    line-height: 1.3em;

	pointer-events: none;
}

label.field.qCheckbox b {
	pointer-events: auto;
}

label.field.qCheckbox:hover b {
	opacity: 0.8;
	cursor: pointer;
}

.field.qCheckbox input {
	float: left;
	margin-right: 5px;
	pointer-events: auto;
}

	.field.qCheckbox input.flex {
		margin-right: 5px;
	}

.field.qCheckbox.topText b {
	display: block;
	text-indent: 2px;
}

.field.flex.qCheckbox {
	display: flex;
}

	.field.flex.qCheckbox input {
		order: 1;
	}

	.field.flex.qCheckbox b {
		order: 2;
	}

.field.qCheckbox.leftText input {
	float: right;
	margin-right: 10em;
}

.qDialog.field.qCheckbox.hideable {
	float: left;
	display: inline-block;
	font-size: 90%;
}


label.checkboxFlex {
	display: flex;
	margin-bottom: .3rem;
}

	label.checkboxFlex input[type=checkbox] {
		order: 1;
		position: relative;
		vertical-align: middle;
		bottom: 1px;
	}

    label.checkboxFlex b {
        order: 2;
        margin-left: .2rem;
        margin-right: auto;
    }
/* End checkbox specific layout */

.inputSpinner {
	background-image: url("../Images/ajax-loader.gif");
	height: 16px;
	float: right;
	width: fill-available;
	background-repeat: no-repeat;
	background-position: right;
}

.inputCheckMarked {
	background-image: url("../Images/check_gray.png");
	height: 16px;
	float: right;
	width: fill-available;
	background-repeat: no-repeat;
	background-position: right;
}

div.view.webReport input.td.nav.printfast.clickable:not(.faicon),
ul.td.nav input.nav.printfast:not(.faicon) {
	background-color: #777;
	background-image: url("../Images/Icons/printfast.png");
}

.qsearchblock.subgrid a.button.advancedSearch {
	background-image: url("../Images/Icons/24/advanced_search.png");
}

a.button.headermenu {
	min-width: inherit;
	float: right;
	padding: 0.1em 1% 0.1em 1%;
}



div.headerband {
	position: relative;
	padding-bottom: 0.3em;
}

	div.headerband label.qField {
		margin-right: 1.5em;
	}




	div.headerband a.button {
		height: 20px;
		width: 20px;
		position: absolute;
		right: 0;
		top: 0;
		min-width: inherit;
		padding: 0 0 0 0;
	}

		div.headerband a.button.search.left {
			right: 22px;
		}

		div.headerband a.button.menu.right {
			border-left: 2px solid;
		}


/*--------------------jQuery contextMenu http://medialize.github.io/jQuery-contextMenu/docs.html -------------------- */

#context-menu-layer {
	z-index: 999999;
}
	
.context-menu-list {
	z-index: 1000000;
	box-shadow: var(--root-box-shadow);
	color: var(--root-input-font-color);
	background-color: var(--root-box-background-color);
	border: var(--root-box-border);
	border-radius: var(--root-border-radius-card);
}
	
	.context-menu-item	{
		padding-right: 1rem;
		background: none;		
	}
	
	.context-menu-item.hover {
		background-color: var(--root-element-focus-color);
		color: var(--root-input-font-color);
	}


.context-menu-item.icon > span::before {
	font-family: var(--font-awesome-latest);
	position: absolute;
	left: 9px;
}

.context-menu-item.icon-dialog > span::before {
	content: '\f2d2';
}

.context-menu-item.icon-submenu > span::before {
	content: '\f053';
}

.context-menu-item.icon-locked > span::before {
	content: '\f023';
	font-weight: bold;
}


/*---------------------jsTree custom overrides ----------------------------------------------------------------------*/
	.jstree-anchor {
		color: var(--root-label-font-color);
	}
	
li .jstree-anchor.jstree-clicked {
	background: #777;
	color: #EEE;
	border-radius: 0;
}

li .jstree-anchor.jstree-hovered.jstree-clicked {
	border: 1px solid #444;
}

li .jstree-anchor.jstree-hovered:not(.jstree-clicked) {
	background: var(--root-element-focus-color);
	border: 1px solid #444;
}

.jstree-scrollContainer {
	overflow: auto;
	border: 1px solid #CCC;
}

ul.jstree-container-ul {
	height: 100%;
	z-index: 100;
}

ul.vakata-context.jstree-contextmenu {
	background-color: #777;
	color: #EEE;
	border: none;
	box-shadow: none;
}

	ul.vakata-context.jstree-contextmenu li > a {
		color: #EEE;
		padding: 0 2em 0 2em;
		line-height: 2.4em;
		text-shadow: none;
		border-radius: 0;
	}

		ul.vakata-context.jstree-contextmenu .vakata-context-hover > a,
		ul.vakata-context.jstree-contextmenu li > a:hover {
			position: relative;
			background-color: #555;
			border: medium none;
			box-shadow: none;
		}

		ul.vakata-context.jstree-contextmenu li > a .vakata-contextmenu-sep {
			display: none;
		}

        ul.vakata-context.jstree-contextmenu li > ul {
            background-color: #777;
        }

        .vakata-context li > a.vakata-context-parent {
            background-image: url("../Images/Icons/24/ArrowHead-Right.png") !important;
        }

    .jstree-default a.jstree-search {
	color: #47B;
	font-style: normal;
	font-weight: bold;
}

.jstree-default-small .jstree-node, .jstree-default .jstree-icon,
.jstree-default-small .jstree-node, .jstree-default .jstree-icon {
	background-image: url("../Images/Iconsets/32px_q3.png");
}

/* ------------------------------------------------ CKEDITOR -------------------------------------*/

.cke_top {
	background: #e4e4e4 none;
	padding: 0;
	border-bottom: 1px solid #CCC;
}
	.cke_inner,
	.cke_source {
		background: transparent !important;
	}

.cke_toolgroup {
	background: #e4e4e4 none;
	border: none;
	margin: 0;
	border-radius: 0;
}

a.cke_combo_button,
.cke_combo,
.cke_combo_off,
.cke_combo_on,
.cke_combo_on a.cke_combo_button,
.cke_combo_off a.cke_combo_button,
.cke_combo_off a.cke_combo_button:hover,
.cke_combo_off a.cke_combo_button:focus,
.cke_combo_on a.cke_combo_button:hover,
.cke_combo_on a.cke_combo_button:focus {
	margin: 0;
	border: none;
	background: #e4e4e4 none;
	border-radius: 0;
	box-shadow: none;
}

	.cke_combo_off a.cke_combo_button:hover {
		background-color: #ccc;
	}

a.cke_button_off,
a.cke_button_on,
a.cke_button_off:hover,
a.cke_button_off:focus,
a.cke_button_off:active,
a.cke_button_on:hover,
a.cke_button_on:focus,
a.cke_button_on:active,
a.cke_button_disabled:hover,
a.cke_button_disabled:focus,
a.cke_button_disabled:active {
	background: #e4e4e4 none;
	border-radius: 0;
	box-shadow: none;
}

	a.cke_button_off:hover {
		background-color: #ccc;
	}


div.cke_chrome {
	box-shadow: none;
	border: 1px solid #b6b6b6;
	background: #e4e4e4;
}
	
	iframe.cke_wysiwyg_frame {
		background-color: var(--root-tile-background-color) !important;
	}


/*-------------------------------Validation ---------------------------------- */

label.qField input.validationError,
label.qlabel input.validationError {
	color: red !important;
}

span.validationErrorNotifier {
	color: red !important;
	font-size: 1.5em;
	margin-left: 2px;
	margin-top: 2px;
}

div.validationTooltip {
	box-shadow: none;
	border: 1px solid red;
	font-family: var(--font-family);
	font-size: 11px;
	padding: 1px;
}

input[type="email"].invalid {
	background-color: pink;
}


/*-------------------------------Color legend-----------------------------------*/

ul.colorlegend {
	list-style: none;
	width: 100%;
	display: flex;
    flex-flow: column;
}

    ul.colorlegend li {
        float: left;
        margin-right: 5em;
		display: flex;
    }

    ul.colorlegend span {
        border: 0.1em solid #ccc;
        float: left;
        min-width: 3em;
        height: 1em;
		margin: 0.1em 0.3em 0.1em 0.1em;
		align-self: center;
    }

    ul.colorlegend label {
        display: inline-block;
		color: var(--root-label-font-color);
	}

    ul.colorlegend.rowflow {
        flex-flow: row wrap;
		margin-bottom: 5px;
    }
		ul.colorlegend.rowflow li {
			margin-right: 1.5em;
			line-height: 2em;
			gap: var(--root-icon-gap);
		}

/*---------------------------- MISC -------------------------------------------*/

.qverticalDivider {
    width: 2px;
    background-color: #dedede;
    margin: 0.4em;
}

othersInView {
	visibility: hidden;

	font-size: 18px;
	width: 22px;
	height: 20px;
	display: inline-block;
	vertical-align: top;
	padding: 2px;
	text-align: center;
}

othersInView.qSomeoneAlive {
	visibility: visible;
	color: var(--root-state-color-error);
}

.viewLocked {
	visibility: hidden;
	color: var(--root-state-color-error);;
	width: 20px;
	height: 20px;
	font-size: 20px;
	padding: 2px;
	display: inline-block;
	vertical-align: top;
}

.viewLocked.locked {
	visibility: visible;
	animation: blink 2s ease-in infinite;
}

@keyframes blink {
	from, to { opacity: 1 }
	50% { opacity: 0.4 }
}

.qLowOpacity {
	opacity: 0.3;
}

.qscrollable-content {
	overflow-y: auto;
}

.qflex-one {
	flex: 1;
}

.qflex-two {
	flex: 2;
}

.qflex-three {
	flex: 3;
}

.qflex-four {
	flex: 4;
}

.qflex-five {
	flex: 5;
}

.qflex-row {
	display: flex;
	flex-direction: row;
}

.qflex-row-full-height {
	display: flex;
	flex-direction: row;
	height: 100%;
}

.qflex-column {
	display: flex;
	flex-direction: column;
}

.qflex-column-full-height {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.qflex-column-half-height {
	display: flex;
	flex-direction: column;
	height: 50%;
}

.qcenter-vertical {
	margin-top: auto;
	margin-bottom: auto;
}

.qbottom-border {
	border: none;
	border-bottom: 1px solid #909090;
}

.qno-border {
	border: none;
}

input[readonly] {
	background-color: #f6f6f6;
	color: var(--input-disabled-text-color) !important; 
}

input.qno-border {
	border: 2px solid transparent;
}

	input.qno-border:hover {
		border-color: #a7c1ff;
	}

.qinput-padding {
	padding: 0.25em 0.4em 0.1em 0.4em;
}

a.showToolTip {
	height: 18px;
	width: 2em;
	margin-bottom: 0;
	display: block;
	background: url( "../../../Images/Icons/24/info.png") no-repeat;
	background-size: contain;
}

input[type=date].hiddenDateInput {
	/* make invisible without setting display:none or visible false */
	min-height: 0 !important;
	min-width: 0 !important;
	height: 0 !important;
	width: 0 !important;
	border: none !important;
	position: relative !important;
	top: 15px !important;
}

span.icon-span {
	gap: var(--root-icon-gap);
}

div.dhtmlXTooltip.tooltip {
	background-color: var(--root-tile-background-color);
}
/*-------------------------- CUSTOM ELEMENTS --------------------------*/
q3input,
searchinput,
subgrid,
dropdownlist,
qicon,
datepicker,
q3list {
	display: block;
}

q3popover {
	display: inline-block;
}
	
/* q3Input */
label.shortField {
	width: 2rem;
}

.errorTextBox {
	padding: 0.5rem;
	border: 1px solid var(--root-state-color-error);
}

.warningTextBox {
	padding: 0.5rem;
	border: 1px solid var(--root-state-color-warning);
}

.hintTextBox {
	background-color: #d7d7d7;
	padding: 0.2rem;
}

q3input.qwarning label {
	background-color: var(--input-qwarning-color) !important;  /*Same as toastr warning*/
}

input[disabled]:not(.nobox):not(.mviInput),
label.qField:has(input[disabled]):not(.nobox),
.splitFieldFlex span[aria-disabled="true"],
label.qlabel span[aria-disabled="true"] {
	opacity: 1;
	background-color: var(--input-disabled-color) !important;
}

label input.mviInput {
	background-color: rgb(255, 255, 255);
}

/*-------------------------- QMODAL --------------------------*/
div.qModal.qDialog {
	box-shadow: var(--root-box-shadow);
	border: 0;
	max-height: 90vh;
	min-width: 34em;
	display: flex;
	padding: 0;
	contain: content;
	border-radius: var(--root-border-radius-card);
	background-color: var(--root-tile-background-color);
}
	div.qModal.qDialog.invisible {
		opacity: 0;
	}

	div.qModal.qDialog.stretchVertical{
		min-height: 75vh;
		display: flex;
	}

		div.qModal.qDialog.stretchVertical .content,
		div.qModal.qDialog.stretchVertical > *:not(.subtabContextMenu) {
			display: flex;
			flex-direction:column;
			flex: 1;
		}

	div.qModal.qDialog > div.qDialog {
		margin: 1.5em 2em 1.5em 2em;
		box-sizing: border-box;
		display: flex;
		flex-flow: column;
		width: -webkit-fill-available;
	}

		div.qModal.qDialog > div.qDialog > div.content {
			overflow-y: auto;
			flex: 1;
			display: flex;
			flex-direction: column;
			color: var(--root-label-font-color);
		}

	div.qModal.qDialog > * > h2 {
		color: var(--root-label-font-color-header);
		margin-right: 1em;
	}

	div.qModal.qDialog > button.close {
		position: absolute;
		top: 0.5em;
		right: 0.6em;
		color: var(--root-icon-font-color);
		font-size: 28px;
		width: 25px;
		text-align: center;
		background: none;
		border: none;
	}

	div.qModal.qDialog > button.hide {
		position: absolute;
		top: 0.7em;
		right: 1.8em;
		color: var(--root-icon-font-color);
		font-size: 22px;
		background: none;
		border: none;
	}

		div.qModal.qDialog > button.close:hover,
		div.qModal.qDialog > button.hide:hover {
			opacity: 0.7;
		}


div.qDialog.qDialog > div.controls a {
	border: 1px solid #9be;
}

div.qModal > button.close {
    z-index: 99;
}


div.qModal.qDialog.fullScreen,
div.qModal.qDialog.flexFullScreen {
    display: flex;
    left: 1%;
    right: 1%;
    top: 1%;
    bottom: 1%;
}

div.qModal.qDialog.fullScreen .content,
div.qDialog.fullScreen,
div.qDialog.fullScreen .content .dialog {
    display: flex;
    flex-direction: column;
    flex: 1;
}

div.qModal.qDialog.fullScreen {
    max-height: 97vh;
}

.qDialog .dialog.fullHeight {
	height: 100%;
}

.qModal .qDialog .content .view {
	background-color: var(--root-tile-background-color);
}

/**************************** Material icons ************************/
	.material-icons {
	color: var(--root-icon-font-color);
	user-select: none;
}

.material-icons:after {
	content: attr(data-icon);
}

.qclickable {
	cursor: pointer;
}

a.material-icons,
.material-icons.qclickable {
	border-radius: 5px;
}

	a.material-icons:hover,
	.material-icons.qclickable:hover {
		background-color: #d7d7d7;
	}

.material-icons.qenabled {
	outline-style: auto;
	color: #f9f9f9;
	background-color: #a2a2a2;
}

/* Mimics old ugly buttons */
.material-icons.qclickablesquare,
.qclickablesquare {
	border-radius: 0;
	font-size: 16px;
	background-color: #777;
	color: #fff !important;
	padding: 2px;
}

a.qclickablesquare:not(.material-icons) {
	width: 18px;
	height: 18px;
}

a.qclickablesquare:not(.material-icons):hover {
	background-color: #d7d7d7;
}

a.qclickablesquare.faicon {
	font-size: 18px;
	line-height: 18px;
	text-align: center;
}

/** FONT AWESOME **/
.details .headerIcon {
	font-size: 20px;
	color: #555;
}

.faicon.fa-ease {
	--fa-animation-timing: ease-in-out;
}

.faicon.fa-spin {
	--fa-animation-duration: 1.25s;
}

.faicon {
	font-family: var(--font-awesome-latest);
}
	
.faicon.fa-kit,
.faicon.fak {
	font-family: var(--font-awesome-custom);
}


/** qinput-button  **/
span.qlabel-icons {
	display: flex;
	border: 1px solid var(--input-border-color);
	border-left: none;
	border-right: none;
	box-sizing: border-box;
	max-height: var(--root-input-height);
	background-color: var(--root-input-icons-background-color);
}
	
	span.qlabel-icons:has(a:not(.disabled)) {
		border-right: 1px solid var(--input-border-color);
		border-top-right-radius: var(--root-border-radius);
		border-bottom-right-radius: var(--root-border-radius);
		background-color: var(--root-input-background-color);
	}

a.qinput-button {
	font-family: var(--font-awesome-latest);
	color: var(--root-icon-font-color);
	width: 24px;
	cursor: pointer;
	line-height: 20px;
	text-align: center;
	max-height: var(--root-input-height);;
	font-size: var(--root-icon-input-size);
}

	a.qinput-button:hover {
		opacity: 0.7;
	}

	a.qinput-button.disabled {
		background-color: var(--root-icon-disabled-background-color);
		cursor: default;
		pointer-events: none;
		display: none;
	}

/* Reset password view */
div.resetPasswordFormContainer {
	display: flex;
	background-color: white;
	flex-flow: column;
	justify-content: center;
	margin: 1rem auto;
	padding: 1rem;
}
div.resetPasswordFormContainer fieldset {
	margin: .5rem;
}
div.resetPasswordFormContainer fieldset ol {
	display: flex;
	flex-flow: column;
}
div.resetPasswordFormContainer fieldset ol li {
	margin-bottom: .5rem;
	margin-left: auto;
	margin-right: auto;
}
div.resetPasswordFormContainer fieldset ol li label {
	width: 8rem;
	display: inline-block;
}
div.resetPasswordFormContainer fieldset ol li input {
	display: inline-block;
	height: 18px;
	width: 20rem;
}
div.resetPasswordFormContainer fieldset button.resetPasswordSubmit {
	display: flex;
	margin: auto;
	border: 0;
}

div.resetPasswordFormContainer fieldset button.resetPasswordSubmit:hover {
	opacity: 0.7;
	cursor: pointer;
}

#Header a.context-menu-active {
	background-color: rgba( 255, 255, 255, 0.1 );
}

a.context-menu-active {
	opacity: var(--root-hover-opacity);
}

/**************************** Details summary ************************/
details > summary > span {
	font-size: 120%;
	font-weight: 700;
}

details > summary:hover {
	cursor: pointer;
}


/*************************** custom elements ******************************/
.view .qTabPane contactPersons,
.view .qTabPane addresslist,
.view .qTabPane salesdeliverylog {
	flex: 1;
}
}

.formElementSmallMargin{ margin-top: 10px; }
.formElementMiddleMargin{ margin-top: 20px ;}