body {
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
}

/* login */

.appContainer.login .loginData .loginFields {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 32px;
}

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

/* fieldContainer */

.fieldContainer label,
.fieldContainer label:hover,
.fieldContainer label:focus,
.fieldContainer:hover label,
.fieldContainer label.checkBoxContainer,
.fieldContainer label.checkBoxContainer:hover,
.fieldContainer label.checkBoxContainer:focus,
.fieldContainer label.checkBoxContainer:focus-within,
.fieldContainer label.checkBoxContainer .labelTextInline {
	font-size: 16px;
}

.fieldContainer input[disabled],
.fieldContainer input[type='text'][disabled],
.fieldContainer input[type='search'][disabled],
.fieldContainer input[type='password'][disabled],
.fieldContainer textarea[disabled],
.fieldContainer select[disabled] {
	color: var(--mdc-theme-text-hint-on-background);
}

/* label after disabled input */
.fieldContainer:hover input[disabled] ~ label,
.fieldContainer:hover input[type='text'][disabled] ~ label,
.fieldContainer:hover input[type='search'][disabled] ~ label,
.fieldContainer:hover input[type='password'][disabled] ~ label,
.fieldContainer:hover textarea[disabled] ~ label,
.fieldContainer:hover select[disabled] ~ label,
/* label before disabled input (:has works regardless of DOM order) */
.fieldContainer:hover:has(input[disabled]) label,
.fieldContainer:hover:has(input[type='text'][disabled]) label,
.fieldContainer:hover:has(input[type='search'][disabled]) label,
.fieldContainer:hover:has(input[type='password'][disabled]) label,
.fieldContainer:hover:has(textarea[disabled]) label,
.fieldContainer:hover:has(select[disabled]) label {
	color: var(--mdc-theme-text-hint-on-background);
	font-size: 16px;
}

.required {
	padding: 0 0 8px 0;
}

.formError,
.formWarning,
.formSuccess {
	background: var(--mdc-theme-background);
	word-break: break-word;
	font-size: 14px;
	color: inherit;
	padding: 4px 8px;
	border-radius: 4px;
	margin: 6px 0;
	width: 100%;
}

.formError {
	border: 0.5px solid color-mix(in srgb, var(--mdc-theme-error) 30%, transparent);
	border-left: 3px solid var(--mdc-theme-error);
}

.formWarning {
	border: 0.5px solid color-mix(in srgb, var(--mdc-theme-warning) 30%, transparent);
	border-left: 3px solid var(--mdc-theme-warning);
}

.formSuccess {
	border: 0.5px solid color-mix(in srgb, var(--mdc-theme-success) 30%, transparent);
	border-left: 3px solid var(--mdc-theme-success);
}

.formError.text-right {
	border-left: 0.5px solid color-mix(in srgb, var(--mdc-theme-error) 30%, transparent);
	border-right: 3px solid var(--mdc-theme-error);
}

.formWarning.text-right {
	border-left: 0.5px solid color-mix(in srgb, var(--mdc-theme-warning) 30%, transparent);
	border-right: 3px solid var(--mdc-theme-warning);
}

.formSuccess.text-right {
	border-left: 0.5px solid color-mix(in srgb, var(--mdc-theme-success) 30%, transparent);
	border-right: 3px solid var(--mdc-theme-success);
}

.formError span.error,
.formWarning span.warning,
.formSuccess span.success,
.appControl .formError span.error,
.appControl .formWarning span.warning,
.appControl .formSuccess span.success {
	margin: 0 4px 0 0;
}

.message {
	color: var(--mdc-theme-on-background);
}

.message .errorMessage,
.message .warningMessage,
.message .successMessage {
	display: flex;
	gap: 8px;
	margin-bottom: 12px;
}

.message .errorMessage .alertIcon {
	color: var(--mdc-theme-error);
}

.message .warningMessage .alertIcon {
	color: var(--mdc-theme-warning);
}

.message .successMessage .alertIcon {
	color: var(--mdc-theme-success);
}

button {
	background: var(--mdc-theme-button-primary);
	color: var(--mdc-theme-on-primary);
}

button.secondary,
.button.secondary {
	background: var(--mdc-theme-button-secondary);
	color: var(--mdc-theme-on-button-secondary);
}

button:hover,
.button:hover {
	background: var(--mdc-theme-button-hover);
	color: var(--mdc-theme-on-button-primary);
}

button.infoIcon:hover,
.button.infoIcon:hover {
	background: transparent;
	color: var(--mdc-theme-primary);
}

button.active,
button.secondary.active,
.button.active,
.button.secondary.active {
	background: var(--mdc-theme-button-primary);
	color: var(--mdc-theme-on-button-primary);
	cursor: default;
	pointer-events: none;
}

button::before,
button:hover::before {
	display: none;
	content: unset;
}

h3 {
	font-size: 20px;
}

h4 {
	font-size: 18px;
}