/*
 * Imports of other global style sheets within the theme folder.
 * Only global customization should be here: values for css custom properties, media queries etc.
 */
@import 'typography.css';
@import 'noto-sans.css';
@import 'layout.css';
@import 'views.css';
@import 'component-styles/accordions.css';
@import 'component-styles/buttons.css';
@import 'component-styles/icons.css';
@import 'component-styles/input-fields.css';
@import 'component-styles/layouts.css';
@import 'component-styles/menu-bar.css';
@import 'component-styles/grids.css';
@import 'component-styles/dialogs.css';
@import 'component-styles/others.css';
@import 'component-styles/tabs.css';

html, :host {
	--app-bar-height: var(--lumo-size-xl);
	--transition-duration-s: 160ms;
	--transition-duration-m: 240ms;
	--transition-duration-l: 300ms;

	/* Responsive sizing and spacing */
	--lumo-space-r-m: var(--lumo-space-m);
	--lumo-space-r-l: var(--lumo-space-l);
	--lumo-space-r-x: var(--lumo-space-l);
	--lumo-space-wide-r-m: var(--lumo-space-wide-m);
	--lumo-space-wide-r-l: var(--lumo-space-wide-l);

	/* More contrast to disabled elements */
	--lumo-disabled-text-color: hsla(210, 14%, 14%, 0.60);

	--ifactory-vaadin-text-area-wrap-label: normal;
	/* Height can be set for all devices. */
	--ifactory-vaadin-text-area-height: 25em;
	--ifactory-vaadin-text-area-note-height: 25em;
	
	/* Crud DnD column width */
	--ifactory-crud-dnd-column-width: 2.5rem;
	/* Crud action column width */
	--ifactory-crud-action-column-width: 1.5rem;
	/* Crud edit column width */
	--ifactory-crud-edit-column-width: 1.5rem;

	/* Grid DnD column width */
	--ifactory-grid-dnd-column-width: 2.5rem;
	/* Grid action column width */
	--ifactory-grid-action-column-width: 1.5rem;
	/* Crud edit column width */
	--ifactory-grid-edit-column-width: 1.5rem;

	/* Case manager action column size */
	--ifactory-csmngr-action-column-width: 8.6rem;

	/* Annexes action column width. */
	--ifactory-annexes-action-column-width: 8.6rem;
	
	/* ExpertMode grid columns size. */
	--ifactory-expert-mode-group-column-width: 7.6rem;
	--ifactory-expert-mode-id-column-width: 4rem;
	--ifactory-expert-mode-code-column-width: 4.5rem;

	/* Crud viewer min height. */
	--ifactory-vaadin-crud-viewer-minheight: 14em;

	/* Grid viewer min height. */
	--ifactory-vaadin-grid-viewer-minheight: 14em;

	/* Applied only for fields which have a certain theme variant.
	   Please see vaadin-text-field.css */
	--ifactory-text-field-font-color: var(--lumo-error-color);

	--lumo-clickable-cursor: pointer;
	--main-color-raw: 127,135,15;
	--main-color: rgb(var(--main-color-raw));
	--header-image-overlay-color: rgba(var(--main-color-raw), 0);
	--lumo-primary-color: var(--main-color);
	--lumo-success-color: var(--main-color);
	--lumo-primary-text-color: var(--main-color);
   	--panel-background-color: rgb(255, 217, 102);
	--lumo-font-family: 'Segoe UI', 'Noto Sans', -apple-system, BlinkMacSystemFont, 'Roboto', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';

	height: 100%;
	width: 100%;
	margin: 0;
	padding:0;
	overflow: hidden;
	background-color: var(--lumo-base-color);
}

@media only screen and (max-width: 768px) {
	html, :host {
		/* Do not change this value so that it takes maximum space allowed when on mobile */
		--ifactory-vaadin-text-area-width: 100%;
		--ifactory-vaadin-text-area-note-width: 100%;
	}
}

@media only screen and (min-width: 768px) {
	html, :host {
		--ifactory-vaadin-text-area-width: 30em;
		--ifactory-vaadin-text-area-note-width: 30em;
	}
}

@media (max-width: 479px) {
	html, :host {
		--lumo-space-r-x: 0;
	}
}

@media (min-width: 480px) and (max-width: 1023px) {
	html, :host {
		--lumo-space-r-x: var(--lumo-space-m);
	}
}

@media (max-width: 1023px) {
	html, :host {
		--lumo-space-r-m: var(--lumo-space-s);
		--lumo-space-r-l: var(--lumo-space-m);
		--lumo-space-wide-r-m: var(--lumo-space-wide-s);
		--lumo-space-wide-r-l: var(--lumo-space-wide-m);
	}
}