@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'); */
	/*src: url('fonts/comic-sans.woff2') format('woff2'); */
	src: url('fonts/fairydust.woff2') format('woff2');
	
  }
  @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'); */
	/* src: url('fonts/comic-sans.woff2') format('woff2'); */
	src: url('fonts/fairydust.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'); */
	/* src: url('fonts/comic-sans.woff2') format('woff2'); */
	src: url('fonts/fairydust.woff2') format('woff2');
  }
  
  :root {
	--color-primary: #000000;
	--color-accent: #e50051;
	--color-background: #ffffff;
	--color-surface: #ffffff;
	--color-backface: #f5f5f500;
	--color-on-primary: #ffffff;
	--color-on-surface: var(--color-primary);
	
	--color-button-background: #e50051;
	--color-button-background-hover: #db3a73;
	--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: #ff0000;
	--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);
	}
  }