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 don't jump left or right when a page is laoded which needs a scroll bar */
}

/* Remove black box around focued 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;
}

/*=====================*/
/* The widget which displayes, 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%);
    }
}
/*=====================*/

/*=====================*/
/* This is used to style the knob button on the checkbox elements, when the input is focused via keyboard. (tried hundreds of other solutions already..) */
input[type="checkbox"]:focus-visible + div {
    box-shadow: 0 0 0 3px rgba(0, 0, 225, 0.5);
}
/*=====================*/

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