html {
    height: unset; /* Reset the height of the html element which is set by the "webflow.js" */
}

body {
    /* Disables the ugly blue highligth on all tab elements on touch devices (Chrome adds this blue color) */
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    margin-bottom: 0px;
    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 */
}

button {
    padding: 0;
    background-color: transparent;
}

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

.focusdefault:focus-visible {
    box-shadow: 0 0 0 3px #75b3da;
}

/* Zeigt in allen texten neue Zeilen an wenn "\r\n", "\n" oder "System.Environment.NewLine" verwendet wird */
.text {
    white-space: pre-line;
}

.shadow-empty {
    box-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05), 0 0 0 0 rgb(0 0 0 / 0), 0 0 0 0 rgb(0 0 0 / 0);
}

/*=====================*/
/* 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 > div {
    box-shadow: 0px 0px 6px 3px rgba(0, 0, 225, 0.8);
}
/*=====================*/

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