/* global definitions forms */
body {
	font:
		normal 16px/18px sans-serif,
		arial;
	background-color: #fff;
	color: #111;
	overflow: hidden;
	box-sizing: border-box;
}

.appWrapper {
	padding: 16px;
	display: flex;
	justify-content: center;
	position: relative;
	height: 100vh;
	width: 100vw;
}

.appBackdrop {
	background: var(--mdc-theme-custom-backdrop);
	color: var(--mdc-theme-on-surface);
	transition:
		color 0.3s ease-in-out,
		background-color 0.3s ease-in-out;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	height: 100%;
	width: 100%;
}

[v-cloak] {
	display: none !important;
}

.appOverlay.initialSpinner {
	display: none;
}

#app:has([v-cloak]) ~ .appOverlay.initialSpinner {
	display: flex;
}

/* LOADING PROGRESS */

.loadingProgress.progressBarWrapper {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1000;
	width: 100%;
	border: none;
}

.loadingProgress .progressBar {
	margin: 0;
	border: none;
	height: 5px;
}

.loadingProgress .progressBarInner {
	top: -10px;
}

/* LOADING SPINNER */

.appOverlay {
	position: absolute;
	left: 0;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--mdc-theme-custom-backdrop);
	width: 100%;
	height: 100%;
	z-index: 999;
	cursor: default;
}

.appOverlay.loading {
	cursor: wait;
}

.appOverlay.initOpaque,
.appOverlay.initLogin {
	background: var(--mdc-theme-background);
}

.appOverlay.initLogin {
	z-index: 998;
}

.appOverlay .loadingSpinner {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	overflow: hidden;
	min-height: 200px;
	min-width: 50px;
}

.appOverlay .loadingSpinner .dot {
	display: flex;
	flex: 0 0 auto;
	background-color: var(--mdc-theme-primary);
	width: 13px;
	height: 13px;
	border-radius: 50%;
	margin: 7px auto;
}

.appOverlay .loadingSpinner .dot:nth-child(1),
.appOverlay .loadingSpinner .dot:nth-child(7) {
	animation: right 1s infinite ease-in-out;
}

.appOverlay .loadingSpinner .dot:nth-child(2) {
	animation: left 1.1s infinite ease-in-out;
}

.appOverlay .loadingSpinner .dot:nth-child(3) {
	animation: right 1.05s infinite ease-in-out;
}

.appOverlay .loadingSpinner .dot:nth-child(4) {
	animation: left 1.15s infinite ease-in-out;
}

.appOverlay .loadingSpinner .dot:nth-child(5) {
	animation: right 1.1s infinite ease-in-out;
}

.appOverlay .loadingSpinner .dot:nth-child(6) {
	animation: left 1.05s infinite ease-in-out;
}

@keyframes right {
	0%,
	100% {
		transform: translate(-15px);
	}

	50% {
		transform: translate(15px);
	}
}

@keyframes left {
	0%,
	100% {
		transform: translate(15px);
	}

	50% {
		transform: translate(-15px);
	}
}

.appOverlay .messageBox {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	background-color: var(--mdc-theme-background);
	border: 1px solid var(--mdc-theme-custom-border);
	box-shadow: var(--mdc-theme-custom-shadow);
	border-radius: 4px;
	padding: 16px;
	overflow: hidden;
	min-width: 340px;
	max-width: calc(100vw - 32px);
	max-height: calc(100vh - 32px);
}

.appOverlay .messageBox .message {
	word-break: break-all;
}

.appOverlay .messageBox .appControl {
	padding: 0;
}

.appOverlay .messageBox button.closeMessage {
	background: none;
	align-self: end;
	padding: 0;
	font-size: 16px;
	color: var(--mdc-theme-on-background);
	min-width: unset;
	height: auto;
}

.appOverlay .messageBox button.closeMessage:hover {
	color: var(--mdc-theme-primary);
}

/* login Styles */

.appContainer.login {
	padding: 30px 45px;
	max-width: 500px;
	border-radius: 15px;
	justify-content: start;
	min-height: unset;
	box-shadow: var(--mdc-theme-custom-surface-shadow);
	background: color-mix(in srgb, var(--mdc-theme-background), #fff 20%);
}

.appContainer.login .logo {
	margin-bottom: 48px;
	text-align: center;
	font-size: 30px;
}

.appContainer.login .logo img {
	max-height: 50px;
	max-width: 100%;
	width: auto;
	height: auto;
}

.appContainer.login .loginData {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.appContainer.login .loginData .buttonsContainer {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}

.appContainer.login .loginData .fieldContainer {
	padding: 5px 0 0 0;
}

.appContainer.login .loginData .loginFields {
	width: 100%;
}

.appContainer.login .loginData .loginFields label {
	padding-left: 0;
	margin-bottom: 4px;
	color: var(--mdc-theme-on-background);
}

/* app layout */

.appContainer {
	padding: 0;
	margin: 14px;
	background-color: var(--mdc-theme-background);
	border: 1px solid var(--mdc-theme-custom-border);
	border-radius: 4px;
	box-shadow: var(--mdc-theme-custom-shadow);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 100%;
	height: min-content;
	min-height: 20px;
	max-width: 1000px;
	transition:
		color 0.3s ease-in-out,
		background-color 0.3s ease-in-out;
	transition:
		min-height linear 0.5s,
		max-width linear 1s,
		margin linear 0.5s;
	z-index: 1;
	max-height: calc(100% - 30px);
	flex: 1 1 min-content;
	color: var(--mdc-theme-on-surface);
}

.appContainer.fullScreen {
	min-height: 100%;
	max-width: 100%;
	margin: 0;
}

.appTitle {
	display: flex;
	gap: 10px;
	justify-content: space-between;
	align-items: center;
	flex: 0 0 max-content;
	height: 72px;
	width: 100%;
	padding: 10px 8px 10px 24px;
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	background: var(--mdc-theme-primary);
	color: var(--mdc-theme-on-primary);
	font-size: 24px;
	font-weight: 400;
	letter-spacing: normal;
	white-space: nowrap;
	position: sticky;
	top: 0;
	left: 0;
	z-index: 99;
}

.appTitle label {
	line-height: 1.4;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.appTitle .buttonArea {
	display: flex;
}

.appTitle .buttonArea button {
	flex: 1 1 48px;
	background-color: transparent;
	border: none;
	min-height: 48px;
	min-width: 48px;
	line-height: 1;
	font-size: 24px;
	text-shadow: none;
	padding: 8px;
	border-radius: 50%;
	overflow: visible;
	color: var(--mdc-theme-on-primary);
	transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}

.appTitle .buttonArea button.fullScreenControl .fa.expand,
.appTitle .buttonArea button.fullScreenControl .svg-inline--fa.expand {
	display: inline-block;
}

.appTitle .buttonArea button.fullScreenControl .fa.compress,
.appTitle .buttonArea button.fullScreenControl .svg-inline--fa.compress {
	display: none;
}

.appWrapper.fullScreen .appTitle .buttonArea button.fullScreenControl .fa.expand,
.appWrapper.fullScreen .appTitle .buttonArea button.fullScreenControl .svg-inline--fa.expand {
	display: none;
}

.appWrapper.fullScreen .appTitle .buttonArea button.fullScreenControl .fa.compress,
.appWrapper.fullScreen .appTitle .buttonArea button.fullScreenControl .svg-inline--fa.compress {
	display: inline-block;
}

.appTitle .buttonArea button:hover {
	background-color: var(--mdc-theme-custom-background-light);
}

.appContent {
	padding: 0;
	height: 100%;
	flex: 1 1 min-content;
	transition:
		color 0.3s ease-in-out,
		background-color 0.3s ease-in-out;
	overflow: auto;
}

.appContent.fixedContent {
	flex: 0 0;
	padding: 0;
}

.appControl {
	background-color: var(--mdc-theme-background);
	padding: 16px 16px 24px 16px;
	border-radius: 0 0 4px 4px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	flex-grow: 0;
	position: sticky;
	bottom: 0;
	left: 0;
	z-index: 99;
	transition:
		color 0.3s ease-in-out,
		background-color 0.3s ease-in-out;
	width: 100%;
}

.appControl .leftControl {
	flex: 1 1 auto;
	display: flex;
	justify-content: start;
	gap: 8px;
}

.appControl .rightControl {
	flex: 1 1 auto;
	padding-left: 8px;
	display: flex;
	justify-content: end;
	gap: 8px;
}

.appControl .error {
	margin-bottom: 5px;
}

/* Responsive */
@media only screen and (max-width: 768px) {
	.appWrapper {
		padding: 0;
		overflow: auto;
	}

	.appContainer {
		min-height: 100%;
		max-width: 100%;
		margin: 0;
	}

	.fullScreenControl {
		display: none;
	}
}