html {
  overscroll-behavior-y: contain;
}

body {
  line-height: 20px;
  font-family: Roboto, sans-serif;
  font-size: 15px;
  overflow-y: scroll; /* Alway display the y-axis scroll bar. This way the centered content including navigation bar and top banner doesn't jump left or right when a page is loaded which needs a scroll bar */
}

html.reconnect-scroll-lock,
body.reconnect-scroll-lock {
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
}

/* Remove black box around focused elements because we add our own focus styling */
*:focus,
*:focus-visible {
  outline: none;
}

/* Make text links visible for the external information area */
.info-text-container a {
  color: #0072ba;
  text-decoration: underline;
}

/*=====================*/
/* Normalize heights of all input fields in chromium/webkit browsers. Firefox is not affected by this.*/
/* The pseudo-classes are taken from https://codepen.io/dsenneff/pen/poGZZPJ/450f16b97067f1436b9f0012b8cde25d as referenced in https://issues.chromium.org/issues/40946272#comment1 */
input::-webkit-datetime-edit,
input::-webkit-datetime-edit-fields-wrapper,
input::-webkit-datetime-edit-month-field,
input::-webkit-datetime-edit-day-field,
input::-webkit-datetime-edit-year-field,
input::-webkit-date-and-time-value,
input::-webkit-calendar-picker-indicator {
  padding: 0;
}
/*=====================*/

/* Fix select styling on safari */
select {
  --webkit-appearance: none;
}

/*=====================*/
/* The widget which displays, that the application is installed is default hidden */
.installed-widget {
  display: none;
}
/* And is visible when the display is set to standalone. The standalone view is active, when the PWA is installed */
@media all and (display-mode: standalone) {
  .installed-widget {
    display: block;
  }
}
/*=====================*/

/*=====================*/
/* The drag and drop zone for file uploads */
.drag-drop-zone input[type="file"] {
  position: absolute;
  inset: 0px;
  opacity: 0;
  cursor: pointer;
}
/*=====================*/

/*=====================*/
/* SVG image for the 404 page */
.notfound-img {
  background-image: url("../images/404.svg");
}
/*=====================*/

/*=====================*/
/* This is used for the connection UI from Blazor */
.components-reconnect-hide > div {
  display: none;
}

.components-reconnect-show > div {
  display: none;
}

.components-reconnect-show > .show {
  display: block;
}

.components-reconnect-failed > div {
  display: none;
}

.components-reconnect-failed > .failed {
  display: block;
}

.components-reconnect-rejected > div {
  display: none;
}

.components-reconnect-rejected > .rejected {
  display: block;
}
/*=====================*/

/*=====================*/
/* Class to style links. This is useful when you want to style links but can't access the html code. I.e. when you render markdown or html from a string. */
.link-styling > a {
  text-decoration: underline;
}
/*=====================*/

/*=====================*/
/* Work-around for Blazored Toast Bug on Screens smaller than 576px */
@media (max-width: 576px) {
  .position-bottomcenter {
    left: 50% !important;
    transform: translate(-50%, 0%);
  }
}
/*=====================*/

/*=====================*/
/* Custom colors on animations */
#AnimationMainColor path {
  stroke: hsl(var(--twc-primary));
}

#AnimationBlackColor path {
  stroke: hsl(var(--twc-black));
}
/*=====================*/

/*=====================*/
/* Custom sitewide scrollbar */
*::-webkit-scrollbar {
  height: 5px;
  width: 5px;
}

/* Track */
*::-webkit-scrollbar-track {
  background: hsl(var(--twc-backgroundmain));
}

/* Handle */
*::-webkit-scrollbar-thumb {
  background: hsl(var(--twc-neutral-300));
  border-radius: 10px;
  cursor: pointer;
}

/* Handle on hover */
*::-webkit-scrollbar-thumb:hover {
  background: hsl(var(--twc-primary));
}
/*=====================*/

.info-text-container a[href]:focus,
.info-text-container a[href]:focus-visible {
  outline: 3.5px solid hsl(var(--twc-primary));
  border-radius: 2px;
  transition-property: all;
  transition-duration: 100ms;
  transition-timing-function: ease-in;
}