@import url("metro-icons.css");

@font-face 
{
    font-family: 'Roboto';
    src:	url('./fonts/Roboto-regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face 
{
    font-family: 'Roboto';
    src:	url('./fonts/Roboto-medium.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}


:root{
  --main-font-family: 'Roboto', sans-serif;
  
  --main-bg-color: #ececec;
  --red-color: #DB007A;
  --white-color: #FFF;
  --gray-color: #969696;
  --error-text-color: red;
  --dark-gray-color: #777C7F;
  --yellow-color: #ffeb6961;
  --blue-color: #A2DEFA;
  --errorpopupbackground: #F6BFDD;
  
  --appbar-font-family: 'Roboto', sans-serif;
  --appbar-background-color: var(--red-color);
  --appbar-divider-color: var(--white-color);
  
  --fontsize-m2: 10pt;
  --fontsize-m1: 12pt;
  --fontsize-nn: 13pt;
  --fontsize-p1: 14pt;
  --fontsize-p2: 16pt;
  --fontsize-p3: 24pt;
  
  --iconsize: 1.35rem;
}

html
{
  font-size: var(--fontsize-nn);
  font-family: var(--main-font-family);
  background-color: var(--main-bg-color);
  margin: 0px;
  padding: 0px;
}

body
{
  margin: 0px;
  padding: 0px;
  padding-bottom:150px;
  
  /*Dieser Eintrag regelt, dass insbesondere auf mobilen Endgeräten kein Reload der Seite stattfindet, wenn ein touchmove gemacht wird*/
  overscroll-behavior: contain;
}

button
{
  font-size: var(--fontsize-p1);
  background-color: var(--red-color);
  color: var(--white-color);
  border: 0px;
}

div .form #errordesc
{
  color: var(--error-text-color);
  font-size: var(--fontsize-m2);
}
  
c-autocomplete
{
  /*z-index: 900;*/
}

[class^="mif-"]
{
  font-size: var(--iconsize);
}