/**
*
*
*
*/

/***************************************************
*    IMPORT
***************************************** *<:o) ***/
@import url('style.css');
@import url('../../js/modules/KMVision/kmvision-editor.css');


/***************************************************
*    ROOT
***************************************** *<:o) ***/

:root {
	--km-font-icon: 'bootstrap-icons';
	--km-font-icon-size: 1.2em;

	--color-primary: #012970;
	--color-secondary: #4154f1;
	--color-primary-rgb: 1, 41, 112;
	--color-secondary-rgb: 65, 84, 241;

	/* --bs-table-color: var(--bs-body-color); */
}


/***************************************************
*    GENERAL
***************************************** *<:o) ***/
.hand, .ruka {
	cursor: pointer;
}

.z-5000 {
	z-index: 5000;
}

.dvh-100 {
	height: 100dvh;
}


.alert {
	position: relative;
	padding-left: 4rem;
}

.alert.alert-primary {
	position: absolute;
	left: 2rem;
	top: .8rem;
	font-family: var(--km-font-icon);
	font-size: var(--km-font-icon-size);
	content: '\F433';
}

.alert.alert-danger::before {
	position: absolute;
	left: 2rem;
	top: .8rem;
	font-family: var(--km-font-icon);
	font-size: var(--km-font-icon-size);
	content: '\F33B';
}

.alert.alert-success::before {
	position: absolute;
	left: 2rem;
	top: .8rem;
	font-family: var(--km-font-icon);
	font-size: var(--km-font-icon-size);
	content: '\F26D';
}

.alert.alert-warning::before {
	position: absolute;
	left: 2rem;
	top: .8rem;
	font-family: var(--km-font-icon);
	font-size: var(--km-font-icon-size);
	content: '\F339';
}

#main-spinner {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	display: flex; /* flex; */
	justify-content: center;
	align-items: center;
	height: 100dvh; /* 10rem; */
	background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0));
	/* border: 1px solid rgba(0, 0, 0, 0.5); */
	z-index: 5000;
}


/***************************************************
*    HEADER
***************************************** *<:o) ***/
.logo img {
	max-height: 60px;
	margin-right: 6px;
}


/***************************************************
*    MAIN
***************************************** *<:o) ***/
main#main {
	min-height: 85dvh;
}


/***************************************************
*    TABLE
***************************************** *<:o) ***/
.datagrid {
	--bs-table-color-state: var(--bs-body-color);
	/* --bs-table-bg-state: var(--bs-body-color); */
	--bs-table-color: var(--bs-body-color);
}

.datagrid .row-filters {

	& .form-control:focus {
		color: var(--bs-body-color);
		background-color: var(--bs-body-bg);
		border-color: var(--color-primary); /* #86b7fe; */
		outline: 0;
		box-shadow: none; /* 0 0 0 .25rem rgba(13,110,253,.25); */
	}
}

.datagrid table {
	/* color: var(--bs-table-color-state,var(--bs-table-color-type,var(--bs-table-color))); */
	color: var(--bs-body-color);
}

.table > :not(caption) > * > * {
	/* var(--bs-table-color-state,var(--bs-table-color-type,var(--bs-table-color))) */
	color: var(--bs-body-color);
}

.datagrid thead,
.datagrid thead tr {
	background-color: #f6f9ff;
	--bs-table-bg: #f6f9ff;
}


.datagrid tfoot,
.datagrid tfoot tr {
	background-color: #f6f9ff;
	--bs-table-bg: #f6f9ff;
}

/* .datagrid tfoot .col-items {
	width: 25%;
}

.datagrid tfoot .col-pagination {
	width: 50%;
}

.datagrid tfoot .col-per-page {
	width: 25%;
} */


/***************************************************
*    TABLE
***************************************** *<:o) ***/
.is-invalid~.invalid-feedback,
.is-invalid~.invalid-tooltip,
.was-validated :invalid~.invalid-feedback,
.was-validated :invalid~.invalid-tooltip,
.was-validated :invalid .invalid-feedback
{
	display: block;
}