:root{
    --grey: rgba(12,12,13,1);
    --framemaxwidth:650px;
    --frameminwidth:310px;
    --headerheight:4.75rem;
    --loadingwidth:4rem;
    --loadingheight:4rem;
  }

  body {
    font-family: 'KoHo', sans-serif;
    margin:0px;
    padding:0px;
    background-color:var(--grey);
    opacity:90%;
  }

  .headerContainer{
    display:flex;
    justify-content: center;
    align-items:center;
    margin-top:0rem;
    min-width:var(--frameminwidth);
    height:var(--headerheight);
    background-color:var(--grey);
  }

  .headerFlexPad{
    height:100%;
    width:calc(100vw/2 - var(--framemaxwidth)/2 + 10px);
    padding:0.25rem;
  }

  .logoContainer{
    display:flex;
    flex-shrink:1;
    align-items:center;
    justify-content:center;
    height:100%;
    flex-shrink:1;
    height:100%;
    padding:0.25rem;
  }

  .menuFlexContainer{
    flex-grow:1;
  }

  .menuColContainer{
    display:flex;
    flex-direction:column;
    justify-content: center;
    align-items:center;
  }

  .menuTopLineContainer{
    display:flex;
    flex-direction:row;
    align-content:space-between;
    padding-bottom:3px;
  }

  .menuBottomLineContainer{
    display:flex;
    flex-direction:row;
    padding-top:2px;
  }
  .menuLangContainer{
    flex-shrink:1;
    padding:0.25rem;
  }
  .menuLang{
    color:white;
    font-size:larger;
    padding-right:5px;
  }

  .menuSpacer{
    width:8px;
  }


  .pdfContainer{
    display:inline-block; 
    text-align:center;
    width:100vw;
  }

  .pdfFrame{
    width:100%;
    min-width: var(--frameminwidth);
    max-width: var(--framemaxwidth);
    height:calc(100vh - var(--headerheight));
    background-color: var(--grey);
    object-fit:fill;
  }

  input {
    border-radius: 5px;
    font-family: 'KoHo', sans-serif;
  }
  .loadingContainer{
    position: fixed;
    top: calc(50vh - var(--loadingheight)/2);
    left: calc(50vw - var(--loadingwidth)/2);
    width: var(--loadingwidth);
    height: var(--loadingheight);
    display: flex;
    align-items:center;
    justify-content:center;
    z-index: 1000;
  }

  .loading {
    width:100%;
    height:100%;
  }

  .fadein{
    opacity:.85;
    transition: opacity 0.5s linear 0s;
  }
  .fadeout{
    opacity:0;
    transition: opacity 0.5s linear 2s;
  }

  .selected {
    padding:2px;
    margin:auto;
    border-radius:5px;
    border:2px solid lightpink;
    background-color:black;
    text-align:center;
    color:lightpink;
    font-weight:bold;
  }

  .selectedtext {
    padding-left:3px;
    padding-right:3px;
    color:lightpink;
    font-weight:bolder;
  }

  .unselectedtext {
    padding-left:3px;
    padding-right:3px;
    color:white;
    font-weight:bold;
  }

  .unselected {
    padding:2px;
    margin:auto;
    border-radius:5px;
    border:2px solid white;
    background-color:black;
    text-align:center;
    color:white;
  }