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 */
}

/* 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;
}