/*global style definition for all frontend pages. Additonally contains style instructions for small screen size... (mobile devices etc...)*/

@media only screen and (max-width: 800px) {
  /* Bis zur ca. 3-fachen Bildschirmbreite wird das Menü und alle Dialoge als Vollbild angezeigt
      und ist toggle-bar. */
  #uiOverlay, .dialog {
    width: 100vw;
    left: 0px;
    max-width: 100vw;
  }

  /*close menu on certain actions mobile only. has to override inline style (thats why use important)*/
  #closedMenu.mapAction{
    display: block !important;
  }
  #uiOverlay.mapAction{
    display: none !important;
  }
}

/*disables toggle of Map UI overlay if screen size is large enough*/
@media only screen and (min-width: 801px) {
  /* .toggleElement {
    display: none;
  }
  #closedMenu {
    display: none;
  }
  #uiOverlay {
    display: block;
  } */
}


/* It targets only the app used with a system icon in standalone mode -> todo*/
@media (display-mode: standalone) {
}

/* It targets only the app used with a system icon in minimal ui -> todo*/
@media (display-mode: minimal-ui) {
}


/*global style declarations*/
.unselectable, .dialog {
  user-select: none;
}

.min180{
  /*min-width: 180px;*/
  overflow: hidden;
}

.input.required, .select.required{
  border: 1px solid Lightgray !important;

  &.valid{
    border: 1px solid Lightgray !important;
  }
  &.invalid{
    border: 1px solid red !important;
  }
}

body {
  overscroll-behavior-y: contain;
}