/** Properties , Fonts , Animations*/
@import './Resources/vars.css';
@import './Resources/fonts.css';
@import './Resources/animations.css';
/** Elements Styles*/
@import './Elements/button.css';
@import './Elements/checkbox.css';
@import './Elements/fileview.css';
@import './Elements/input.css';
@import './Elements/label.css';
@import './Elements/select.css';
@import './Elements/smartview.css';
@import './Elements/table.css';
@import './Elements/tagglebox.css';
@import './Elements/textarea.css';
@import './Elements/tooltips.css';
@import './Elements/topLabel.css';

@import '../lib/controls/fileUploader.css';
@import '../lib/controls/stopWatch.css';
@import '../lib/controls/dateDisplay.css';
@import '../lib/controls/checkbox.css';
@import '../lib/controls/dateBox.css';
@import '../lib/controls/grid.css';
@import '../lib/controls/datePicker.css';
@import '../lib/controls/switchSelector.css';
@import '../lib/controls/logView.css';
@import '../lib/controls/sectionContainer.css';
@import '../lib/controls/suggestListModel.css';
@import '../lib/controls/suggestList.css';
@import '../lib/controls/wrapper.css';
@import '../lib/controls/entry.css';
@import '../lib/controls/selectElement.css';
@import '../lib/controls/singleFile.css';
@import '../lib/controls/deliverCreator.css';
@import '../lib/controls/dialog.css';
@import '../lib/controls/fileExplorer.css';
@import '../lib/controls/newgrid.css';
@import '../lib/controls/view.css';
@import '../lib/controls/section.css';
@import '../lib/controls/newselect.css';
/** Componenets */
@import './Components/contextmenu.css';
@import './Components/loadscreen.css';
init-data {
	display: none;
	width: 0px;
	height: 0px;
}
html {
	font-size: 11px;
	font-family: Vazir;
	font-style: normal;
	font-weight: normal;
	width: 100dvw;
	height: 100dvh;
	margin: 0px;
	padding: 0px;
	box-sizing: border-box;
	--block-scroll: auto;
}

/** Classes */
ic-1,
.ic-1 {
	--icon_fixed_width: min-content;
	--icon_fixed_height: min-content;
	margin: 0px;
	min-width: var(--icon_fixed_width);
	width: var(--icon_fixed_width);
	max-width: var(--icon_fixed_width);
	min-height: var(--icon_fixed_height);
	height: var(--icon_fixed_height);
	max-height: var(--icon_fixed_height);
	vertical-align: middle;
	text-align: center;
	font-family: 'ic1';
	font-weight: normal;
	font-style: normal;
	font-size: 1.5rem;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	display: inline-block;
	white-space: nowrap;
	word-wrap: normal;
	direction: ltr;
	-webkit-font-feature-settings: 'liga';
	-webkit-font-feature-settings: 'liga';
	font-feature-settings: 'liga';
	-webkit-font-smoothing: antialiased;
	-webkit-user-select: none;
	user-select: none;
}

body {
	background: var(--background);
	box-sizing: border-box;
	direction: rtl;
	margin: 1px;
	outline: none;
	overflow: hidden;
	padding: 5px;
	display: grid;
	grid-template-columns: max-content 1fr;
	grid-template-rows: 40px 1fr;
	height: 100%;
	gap: 10px;
	position: relative;
	top-bar {
		grid-row: 1;
		grid-column: 1/3;
		background-color: var(--cardwhite);
		padding: 0px;
		box-sizing: border-box;
		display: flex;
		flex-direction: row;
		gap: 0px;
		border-radius: var(--border_round_value);
		align-items: center;
		& > * {
			border-left: 1px solid var(--bordergray);
			border-right: 1px solid var(--bordergray);
			border-radius: 0px !important;
			height: 100%;
			box-sizing: border-box;
			padding: 0px 5px;
			align-content: center;
			cursor: default;
		}
		app-detail {
			display: flex;
			flex-direction: column;
			gap: 0px;
			justify-content: center;
			align-items: center;
			user-name {
				font-size: 0.9rem;
				color: var(--textsecondary);
			}
		}
		app-detail,
		db-name,
		app-view,
		check-update {
			&:hover {
				cursor: pointer;
				color: var(--purplekpi);
			}
		}
		side-bar-toggle {
			min-width: 35px;
			width: 35px;
			max-width: 35px;
			background-image: url('/public/appIcon/menu.svg');
			background-size: 60%;
			background-repeat: no-repeat;
			background-position: 50% 50%;
			cursor: pointer;
		}
		c-exit {
			width: 35px;
			background-image: url('/public/appIcon/exit.svg');
			background-size: 60%;
			background-repeat: no-repeat;
			background-position: 50% 50%;
			cursor: pointer;
			margin-right: auto;
		}
	}
	side-bar {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: var(--cardwhite);
		-webkit-user-select: none;
		-moz-user-select: none;
		user-select: none;
		z-index: 3;
		overflow-y: hidden;
		overflow-x: visible;
		border-radius: var(--border_round_value);
		padding: 0px;
		height: 100%;
		transition: width 250ms ease-in-out;
		grid-column: 1;
		& > scroll-bar {
			display: flex;
			flex-direction: column;
			gap: 10px;
			overflow-y: scroll;
			overflow-x: hidden;
			height: 100%;
			max-height: 100%;
			width: 100%;
			max-width: 100%;
			box-sizing: border-box;
			padding: 5px;
			padding-top: 0px;
			side-top {
				padding: 5px 0px;
				position: sticky;
				top: 0px;
				background-color: var(--cardwhite);
				z-index: 5;
				border-bottom: 1px solid var(--bordergray);
				& > button {
					background-image: url('/public/appIcon/menu.svg');
					background-size: contain;
					background-repeat: no-repeat;
					height: 20px;
					aspect-ratio: 1/1;
					align-self: end;
					border: none;
					border-radius: 0px;
					padding: 0px;
					margin: 0px;
					&:focus,
					&:focus-visible {
						border-color: none;
						box-shadow: none;
					}

					&:hover {
						cursor: pointer;
						border-color: transparent;
						box-shadow: none;
					}

					&:active {
						background-color: none;
						color: none;
						box-shadow: none;
					}
				}
			}

			page-item {
				display: flex;
				flex-direction: row;
				gap: 10px;
				padding: 2px;
				z-index: 4;
				height: 32px;
				cursor: pointer;
				align-items: center;
				&:hover {
					color: var(--purplekpi);
				}
				page-text {
					flex-grow: 1;
				}

				&.exit {
					margin-top: auto;
					margin-bottom: 10px;
				}
				ic-1 {
					height: min-content;
					aspect-ratio: 1/1;
					font-size: 1.8rem;
				}
				img {
					aspect-ratio: 1/1;
					height: 20px;
				}
			}

			page-group {
				display: flex;
				flex-direction: column;
				width: 100%;
				height: 32px;
				padding-right: 2px;
				z-index: 4;
				cursor: pointer;
				transition: 200ms height;
				ic-1 {
					height: min-content;
					aspect-ratio: 1/1;
					font-size: 1.8rem;
				}
				img {
					aspect-ratio: 1/1;
					height: 20px;
				}
				group-draw {
					background-image: url('/public/appIcon/arrowdown.svg');
					background-size: 70%;
					background-repeat: no-repeat;
					aspect-ratio: 1/1;
					height: 20px;
					background-position: 50% 50%;
					transition: transform 200ms ease-in-out;
					transform: rotate(0deg);
				}
				&.open {
					height: calc(var(--x) * 32px + 10px);

					group-container {
						height: calc(calc(var(--x) - 1) * 32px + 10px);
						padding: 5px;
					}

					group-display > ic-1.opener {
						transition: 200ms all;
						transform: rotate(0deg);
					}

					&:hover {
						color: var(--purplekpi);
					}
					group-draw {
						transform: rotate(180deg);
					}
				}

				&:hover {
					color: var(--purplekpi);
				}

				group-display {
					display: flex;
					flex-direction: row;
					width: 100%;
					align-items: center;
					height: 32px;
					gap: 10px;

					group-text {
						flex-grow: 1;
					}
				}

				group-container {
					min-width: 100%;
					gap: 10px;
					display: flex;
					flex-direction: column;
					background-color: var(--background);
					color: var(--textprimary);
					border-radius: var(--border_round_value);
					z-index: 4;
					margin: 0px;
					height: 0px;
					padding: 0px;
					overflow: hidden;
					transition: 200ms height;
					box-sizing: border-box;
				}
			}
		}
	}
	page-container {
		grid-column: 2;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		overflow-y: auto;
		overflow-x: hidden;
		padding: 5px;
		margin: 0px;
		max-width: 100%;
		width: 100%;
		height: 100%;
		z-index: 1;
		gap: 10px;
		scroll-snap-type: y;
		scroll-behavior: smooth;
		scroll-snap-align: end;
		background-color: var(--cardwhite);
		border-radius: var(--border_round_value);
		position: relative;
		water-mark {
			background-image: url('/public/backgrounds/Rubick_Background_04_Light_Waves.png');
			background-size: cover;
			background-repeat: no-repeat;
			background-position: 0% 100%;
			position: absolute;
			width: 100%;
			height: 100%;
			opacity: 0.3;
			box-sizing: border-box;
			z-index: 1;
			top: 0px;
			left: 0px;
		}
		& > * {
			z-index: 2;
		}
		&.blockScroll {
			overflow-y: hidden;
		}
	}
}
#printArea {
	display: none;
}
/** Media Queries*/
@media print {
	#mainContainerID {
		display: none;
	}

	#sidebar {
		display: none;
	}

	#printArea {
		display: block;
		background-color: white;
		color: black;
	}

	header.header {
		display: none;
	}
}
.blinkerror {
	box-shadow: 0px 0px 15px 2px var(--dangerred) inset;
	animation: boxshadowblinkerror 250ms infinite alternate;
}
.blinkvalid {
	box-shadow: 0px 0px 15px 2px var(--successgreen) inset;
	animation: boxshadowblinkerror 250ms infinite alternate;
}
.highlight {
	box-shadow: 0px 0px 15px 2px var(--warningyellow) inset;
	animation: blinkwithshadow 250ms infinite alternate;
}
@keyframes boxshadowblinkerror {
	to {
		box-shadow: none;
	}
}
@keyframes blinkwithshadow {
	to {
		box-shadow: var(--validshadow) inset;
	}
}
v-panel {
	display: flex;
	flex-direction: column;
	gap: 10px;

	.grow {
		flex-grow: 1;
	}
}

h-panel {
	display: flex;
	flex-direction: row;
	gap: 10px;

	.grow {
		flex-grow: 1;
	}
}

.relative {
	position: relative;
}

.fullwidth {
	width: 100%;
}

se-head {
	-webkit-user-select: none;
	user-select: none;
	font-size: 1.5rem !important;
	font-weight: bold;
	padding-bottom: 5px;
	border-bottom: 1px solid var(--bordergray);
	width: 100%;
	margin-bottom: 10px;
	max-height: max-content;
	width: 100%;
	display: block;
	padding-inline-start: 20px;
	box-sizing: border-box;
}
msg-popover {
	width: max-content;
	height: max-content;
	max-width: 50dvw;
	max-height: 50dvh;
	overflow: auto;
	border-radius: var(--border_round_value);
}
msg-popup {
	display: grid;
	grid-template-columns: 25px 1fr;
	grid-template-rows: 1fr 5px;
	border-radius: var(--border_round_value);
	background-color: var(--cardwhite);
	z-index: 1000;
	padding: 20px;
	animation: popmsg 150ms;
	border: 1px groove var(--bordergray);
	width: 300px;
	box-sizing: border-box;
	& > img {
		justify-self: left;
		width: 25px;
		aspect-ratio: 1/1;
	}

	& > msg-text {
		text-align: right;
		align-content: center;
		padding-right: 5px;
		border-radius: var(--border_round_value);
		color: var(--successgreen);
	}

	& > timer {
		grid-row: 2;
		grid-column: 1 / 3;
		background-color: var(--successgreen);
		background-position: 1px 1px;
		width: 0%;
		animation: fill 2s forwards;
	}

	&.error {
		msg-text {
			color: var(--dangerred);
		}
		box-shadow: inset var(--dangershadow);
		& > timer {
			background-color: var(--dangerred);
		}

		& > img {
			fill: var(--dangerred);
		}
	}

	&.warning {
		msg-text {
			color: var(--dangerred);
		}

		& > timer {
			background-color: var(--warningyellow);
		}

		& > img {
			fill: var(--warningyellow);
		}
	}

	&.fade {
		animation: fade 200ms forwards;
	}
}

@keyframes popmsg {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes fill {
	0% {
		width: 0%;
	}

	100% {
		width: 100%;
	}
}

@keyframes fade {
	from {
		opacity: 1;
	}

	to {
		opacity: 0;
	}
}

ask-popup {
	z-index: 1000;
	border-radius: var(--border_round_value);
	min-width: max-content;
	width: 20dvw;
	max-width: 40dvw;
	height: max-content;
	height: 20dvh;
	max-height: 40dvh;
	padding: 5px;
	display: grid;
	grid-template-rows: 1fr 35px;
	grid-template-columns: auto 1fr;
	overflow: hidden;
	gap: 10px;

	& > ask-text {
		display: flex;
		flex-wrap: wrap;
		overflow: hidden;
		max-width: 100%;
		grid-area: 1 / 2;
		padding: 5px;
		font-size: 1.5rem !important;
	}

	& > img {
		grid-area: 1 / 1;
		aspect-ratio: 1/1;
		height: 40px;
	}

	& > option-container {
		grid-area: 2 / 1 / 3 / 3;
		display: flex;
		flex-direction: row;
		gap: 10px;
		width: 100%;

		& > yes-option {
			flex-grow: 1;
			width: 50%;
			text-align: center;
			align-content: center;
			border-radius: var(--border_round_value);
			background-color: var(--successgreen);
			color: var(--textprimary);

			&:hover {
				background-color: var(--purplekpi);
				color: var(--primary);
				cursor: pointer;
			}
		}

		& > no-option {
			flex-grow: 1;
			width: 50%;
			text-align: center;
			align-content: center;
			border-radius: var(--border_round_value);
			background-color: var(--warningyellow);
			color: var(--textprimary);

			&:hover {
				background-color: var(--purplekpi);
				color: var(--primary);
				cursor: pointer;
			}
		}
	}

	&.normal {
		background-color: var(--cardwhite);
	}

	&.danger {
		background-color: var(--dangerred);
	}

	&.warning {
		background-color: var(--warningyellow);
	}
}

mark-pr {
	color: var(--primarygreen);
	font-weight: bold !important;
}

.classLoading {
	overflow: hidden;

	&::before {
		content: '';
		width: 100%;
		height: 100%;
		background-image: url('/public/appIcon/loading.svg');
		background-repeat: no-repeat;
		background-size: 25%;
		background-position: 50% 50%;
		position: absolute;
		background-color: var(--cardwhite);
		align-content: center;
		text-align: center;
	}

	& > * {
		display: none;
	}
}

.sli {
	&:hover {
		background: linear-gradient(135deg, var(--purplekpi) -150%, var(--cardwhite) 100%);
		color: var(--textprimary);
		outline: none;
	}

	&:focus,
	&:focus-visible,
	&:focus-within,
	&.selected {
		background: linear-gradient(135deg, var(--primarygreen) -150%, var(--cardwhite) 100%);
		color: var(--textprimary);
		outline: none;
	}
}

.loading,
.req-loading {
	overflow: hidden;
	position: relative;

	&::before {
		content: '';
		width: 100%;
		height: 100%;
		background-image: url('/public/appIcon/loading.svg');
		background-repeat: no-repeat;
		background-size: 50%;
		background-position: 50% 50%;
		background-color: var(--cardwhite);
		align-content: center;
		text-align: center;
		z-index: 1000;
		position: absolute;
		left: 0px;
		top: 0px;
	}
}
popover-wrapper {
	box-sizing: border-box;
	margin: unset;
	border: 1px ridge var(--bordergray);
	border-radius: var(--border_round_value);
	padding: unset;
	outline: unset;
	min-width: max-content;
	max-width: 90dvw;
	height: max-content;
	min-height: max-content;
	max-height: 90dvw;
	top: var(--poptop);
	right: var(--popright);
	position: absolute;
	display: flex;
	flex-direction: column;
	z-index: 100;
	box-shadow: var(--primaryshadow);
	&:has(popover-head) {
		display: grid;
		grid-template-rows: 40px 1fr;
		popover-head {
			width: 100%;
			height: 100%;
			display: grid;
			grid-template-columns: 30px 1fr;
			justify-items: center;
			background: linear-gradient(180deg, var(--primarygreen) -100%, var(--background) 100%);
			align-items: center;
			margin-bottom: 5px;
			box-sizing: border-box;
			&:hover {
				cursor: move;
			}
			button {
				background-image: url('/public/appIcon/cancel.svg');
				background-size: 100%;
				background-repeat: no-repeat;
				margin: 0px;
				padding: 0px;
				aspect-ratio: 1/1;
				height: 20px;
				width: 20px;
				border: none;
				background-color: transparent;

				&:hover {
					background-color: unset;
					box-shadow: none;
				}

				&:focus,
				&:focus-visible,
				&:focus-within {
					box-shadow: none;
					outline: none;
					border: none;
				}
			}
			popover-head-text {
				font-size: 1.4rem;
				-webkit-user-select: none;
				user-select: none;
				width: 100%;
				height: 100%;
				text-align: center;
				align-content: center;
				box-sizing: border-box;
				padding: 10px;
			}
		}
	}
}
.force-hidden {
	display: none !important;
}
/*! scroll bar section */
::-webkit-scrollbar {
	box-sizing: border-box;
	min-width: 5px;
	max-width: 5px;
	max-height: 5px;
	min-height: 5px;
	z-index: 100;
}
:hover::-webkit-scrollbar {
	min-width: 5px;
	max-width: 5px;
	max-height: 5px;
	min-height: 5px;
}
/* Track */
::-webkit-scrollbar-track {
	background: transparent;
	/* box-shadow: inset var(--greenshadow); */
	border-radius: 10px;
	z-index: 100;
}

/* Handle */
::-webkit-scrollbar-thumb {
	background: var(--primarygold);
	border-radius: 10px;
	z-index: 100;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
	background: var(--purplekpi);
	z-index: 100;
	cursor: grab;
}

::-webkit-scrollbar-thumb:active {
	background: var(--successgreen);
	cursor: grabbing;
}

/* If you want to completely remove all interactive styles */
a {
	text-decoration: none;
	-webkit-tap-highlight-color: transparent; /* For mobile */
	/* Remove all link styling on click */
	&:active,
	&:focus,
	&:visited {
		color: inherit;
		text-decoration: none;
		outline: none;
	}

	/* Remove the default focus ring on click */
	&:focus-visible {
		outline: none;
	}

	/* Remove the default blue/purple colors */
	&:link,
	&:visited {
		color: inherit;
		text-decoration: none;
	}
	&:active {
		color: inherit;
		text-decoration: none;
		background-color: transparent;
	}
	&:hover {
		color: var(--purplekpi);
	}
}
h1 {
	font-size: 1.5rem;
	margin: 0px;
	text-align: center;
	align-content: center;
}
h2 {
	font-size: 1.3rem;
	margin: 0px;
	text-align: start;
	align-content: start;
}
h3 {
	font-size: 1.1rem;
	margin: 0px;
	text-align: center;
	align-content: center;
}
h1,
h2,
h3 {
	&.line {
		border-bottom: 1px solid var(--bordergray);
		padding-bottom: 10px;
	}
	&.start {
		text-align: start;
	}
}
/* For when the link is being clicked (mousedown) */
a:active {
	opacity: 1;
	transform: none;
	box-shadow: none;
}
img:not([src]) {
	opacity: 0;
}
@media print {
}
view-container,
db-container {
	display: flex;
	flex-direction: row;
	gap: 10px;
	flex-wrap: wrap;
	background-color: var(--cardwhite);
	border: 1px groove var(--bordergray);
	border-radius: var(--border_round_value);
	padding: 10px;
	view-item,
	db-item {
		height: 50px;
		width: 100px;
		padding: 10px;
		font-size: 1.1rem;
		font-weight: bold;
		text-align: center;
		align-content: center;
		border: 1px groove var(--bordergray);
		border-radius: var(--border_round_value);
		cursor: pointer;
		&:hover {
			cursor: pointer;
			box-shadow: inset var(--hovershadow);
		}
	}
}

document-container {
	display: flex;
	flex-direction: column;
	gap: 10px;
	background: var(--cardwhite);
	padding: 20px;
	border-radius: var(--border_round_value);
	doc-container {
		display: flex;
		flex-direction: row;
		gap: 20px;
	}
	.desc {
		width: 100%;
	}
}
div-row {
	display: flex;
	flex-direction: row;
	gap: 10px;
	padding: 5px;
	background-color: var(--cardwhite);
	box-shadow: outset var(--cardshadow);
	box-sizing: border-box;
	max-width: 100%;
}
.flex {
	flex-wrap: wrap;
}
div-col {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 5px;
	background-color: var(--cardwhite);
	box-shadow: outset var(--cardshadow);
	box-sizing: border-box;
}
.border {
	border: 1px groove var(--bordergray);
	border-radius: var(--border_round_value);
}
.spread {
	justify-content: space-between;
}
.space {
	justify-content: space-around;
}

.wrap {
	flex-wrap: wrap;
}
.hover:hover {
	cursor: pointer;
	box-shadow: inset var(--hovershadow);
}
@media (max-width: 600px) {
	side-bar {
		width: 35px;
		max-width: 35px;
		page-text,
		group-text {
			display: none;
		}
		group-draw {
			display: none;
		}
		&.open {
			width: 160px !important;
			max-width: 160px !important;
			page-text,
			group-text {
				display: unset;
			}
			group-draw {
				display: unset;
			}
		}
	}
}
@media (min-width: 601px) {
	html {
		font-size: 13px;
	}
	h1 {
		font-size: 1.4rem;
		margin: 0px;
		text-align: center;
		align-content: center;
	}
	h2 {
		font-size: 1.2rem;
		margin: 0px;
		text-align: start;
		align-content: start;
	}
	h3 {
		font-size: 1.05rem;
		margin: 0px;
		text-align: center;
		align-content: center;
	}
	side-bar {
		width: 160px;
		max-width: 160px;
		page-text,
		group-text {
			display: unset;
		}
		group-draw {
			display: unset;
		}
		&.open {
			width: 35px !important;
			max-width: 35px !important;
			page-text,
			group-text {
				display: unset;
			}
			group-draw {
				display: unset;
			}
		}
	}
}
.link {
	color: var(--primaryblue) !important;
}
.grow{
	flex-grow: 1;
}
.clickani{
	animation: var(--clickanimation); 
}