@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-display: swap;
	src: url('fonts/font-inter/inter-regular.woff2') format('woff2'),
		url('fonts/font-inter/inter-regular.woff') format('woff');
}

@font-face {
	font-family: 'Inter var';
	font-weight: 100 900;
	font-display: swap;
	font-style: normal;
	font-named-instance: 'Regular';
	src: url('fonts/font-inter/inter-roman.var.woff2') format('woff2');
}

@font-face {
	font-family: 'Inter var';
	font-weight: 100 900;
	font-display: swap;
	font-style: italic;
	font-named-instance: 'Italic';
	src: url('fonts/font-inter/inter-italic.var.woff2') format('woff2');
}

:root {
	--color-primary: #000000;
	--color-accent: #0071ba;
	--color-background: #ffffff;
	--color-surface: #ffffff;
	--color-backface: #f5f5f500;
	--color-on-primary: #ffffff;
	--color-on-surface: var(--color-primary);

	--color-button-background: #154B86;
	--color-button-background-hover: #0071ba;
	--color-button-background-disabled: #d4d4d4;
	--color-button-text: #ffffff;
	--color-button-text-hover: #ffffff;
	--color-button-text-disabled: #181830;
	--color-link: #045e6c;
	--color-link-hover: #058194;
	--color-link-text-disabled: #bcbcbc;
	--button-radius: 0rem;

	--background-image: url('background.jpg') no-repeat center center/cover fixed;
	--background-fallback-color: var(--color-background);
	--color-header-background: #ffffff;
	--color-header-text: #000000;
	--color-progress-filled: #0071ba;
	--color-progress-background: #e2e8e9;
	--color-loader-indicator-bottom: #00ca7b;
	--color-loader-indicator-middle: #02444e;
	--color-loader-indicator-top: rgba(200, 200, 200, 0.7);
}

.logout {
	--color-link: var(--color-on-primary);
	--color-link-hover: var(--color-on-primary)
}

.logout body {
	min-height: 100vh;
	min-width: 100vw;
	/*background: #e50051; */
	background-image: url('background.jpg') no-repeat center center/cover fixed;
	/*background:linear-gradient(315deg,#ffffff 5%,#e50051 97%);  */
	font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", Segoe UI Symbol;
	color: #000000;
	justify-content: center;
	align-items: center;
}

html {
	color: var(--color-on-surface);
	background-color: var(--background-fallback-color);
	background: var(--background-image), var(--background-fallback-color);
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
		Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
		'Segoe UI Symbol';
}

@supports (font-variation-settings: normal) {
	html {
		font-family: 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI',
			Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji',
			'Segoe UI Emoji', 'Segoe UI Symbol';
	}
}

@media (min-width: 521px) and (max-height: 915px) {
	:root {
		font-size: 95%;
	}
}

@media (min-width: 521px) and (max-height: 880px) {
	:root {
		font-size: 90%;
	}
}

@media (min-width: 521px) and (max-height: 830px) {
	:root {
		font-size: 85%;
	}
}

@media (min-width: 521px) and (max-height: 760px) {
	:root {
		font-size: 82%;
	}
}

.loader {
	position: relative;
	width: 77px;
	height: 48px;
	background: #00ca7b;
	background: var(--color-loader-indicator-bottom);
	transform: rotateX(65deg) rotate(45deg);
	color: #02444e;
	color: var(--color-loader-indicator-middle);
	animation: layers1 1s linear infinite alternate;
}

.loader:after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(200, 200, 200, 0.7);
	background: var(--color-loader-indicator-top);
	animation: layerTr 1s linear infinite alternate;
}

@keyframes layers1 {
	0% {
		box-shadow: 0px 0px 0 0px;
	}

	90%,
	100% {
		box-shadow: 20px 20px 0 -4px;
	}
}

@keyframes layerTr {
	0% {
		transform: translate(0, 0) scale(1);
	}

	100% {
		transform: translate(-25px, -25px) scale(1);
	}
}