html, body, app {
    padding: 0;
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
}

#app-loading {
    height: 10em;
    display: flex;
    align-items: center;
    justify-content: center;
    border: solid 1px #000;
    border-style: dashed;
    margin: 10% 25% 25% 25%;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

/* bestrijkt het gehele veld*/
.mainContainer {
    padding: 0;
    margin: 0;
    height: 100vh;
    display: flex;
    flex-flow: row nowrap;
    align-items: stretch;
}

/* rightContainer */
.rightContainer {
    padding: 0;
    margin: 0;
    display: flex;
    width: 100vw;
}


/* LeftContainer BUITEN GEBRUIK */

/* In principe is een left-container het fraaist. Die bevat dan het TU-logo, daaronder het google-zoekvenster
    en daarander de treeview.
    
    Echter, Google vereist het zoekvenster in een div in "index.html" of in deze blazor-site in
    "....05 Hosts/Nijsnet.Bk.ServerWebApp/Pages/_Host.cshtml"
    De rest van van de aanroepen staat in 
    "....05 Hosts/Nijsnet.Bk.ServerWebApp/Views/Shared/MainLayout.razor"

    De styling van alle divs staat in "app.css"

    Daarom wordt ervoor gekozen om de drie divs ieder fixed te definiëren, dus ten opzichte van de viewport
*/


/* Hier staat het TULogo, de rechter container begint op 305px */
.navHeader {
    position: fixed;
    top: 0px;
    left: 5px;
    width: 299px;
 
    text-align: center;
    background-color: #FFFFFF;
}

/* Hier staat het zoekvenster gebaseerd op (maar niet gelijk aan) bk.nijsnet.nl */
.navZoek {
    position: fixed;
    top: 120px;
    left: 14px;

    margin: 0px 5px 5px 5px;
    font-size: 7.5pt;
    text-align: center;
    width: 270px;
    height: 30px;
    background-color: #FFFFFF;
}

/* Hier staat het treview-menu */
.navMenu {
    position: fixed;
    top: 162px; /* was 160px  */
    left: 0px;
    width: 299px;
    height: calc(100vh - 190px); /* let op spaties rond minteken */
    overflow: auto;
    background-color: #F3F3F3;

/* Bij opstarten wordt eerst plain text getoond (voor 1 sec) van de 
    navigatie. Getracht is om dit te camoufleren door tekst en 
    achtergrond dezelfde kleur te geven. Om de een of andere reden
    lukt het niet om de fontkleur te wijzigen. Maar de fontsize 
    lukt merkwaardigerwijs wel. Die is op 0 gezzet. */
    font-size: 0px;
}

.page {
    position: absolute;
    z-index: 1;
    left: 305px;
    top: 0px;
    background-color: #FFFFFF;
    padding: 0;
    margin: 0;
    /*  Roeland 
    display: flex;
    flex-flow: column nowrap;
    align-items: stretch;
     */

    width: calc(98vw - 325px); /* let op spaties rond minteken */
    min-width: 740px;
    height: auto;
    border-left: solid 2px #C0E0F0;
    border-right: solid 2px #C0E0F0;
    border-bottom: solid 2px #C0E0F0;
}

.page_helaas {
    position: absolute;
    z-index: 1;
    left: 305px;
    top: 122px;
    background-color: #F3F3F3;
    /* padding regelt ruimte aan boven en onderzijd, om tekst te centreren */
    padding: 30px 0;
    margin: 0;
    /*  Roeland 
    display: flex;
    flex-flow: column nowrap;
    align-items: stretch;
     */

    width: 500px;
    height: auto;
    margin: 40px;
    border: solid 3px #C0E0F0;
    text-align: center;
}

    .page header {
        padding-left: 10px;
        padding-right: 10px;
    /*    margin-bottom: 40px;  Gewijzgd door Lau */
        margin-bottom: 20px;
    }

    .page article {
        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: 50px;
        font-size: 10pt;
    }

/* Veranderd door Lau; <p> <h1,2,3> naar Lau_tekst_opmaak.css */

/* Treeview items */
[role=treeitem]::part(positioning-region) {
    background-color: #F3F3F3;
    border-radius: 0;
    color: #000;
}

/* Treeview marker */
[role=treeitem]::part(expand-collapse-button):hover {
    background-color: #F3F3F3;
}

/* Hovered but not selected item */
[role=treeitem]:not(.selected)::part(positioning-region):hover {
    background-color: #D8E8F8;  /* Lau heeft het iets naar lichtblauw geschoven */
}

/* Item text */
[role=treeitem]::part(positioning-region) > a.navigationTreeViewItem {
    font-size: large;
}
a.navigationTreeViewItem {
    color: #000 !important;
}
a.navigationTreeViewItem:visited {
    color: #000;
}

/* Selected item */
.selected::part(positioning-region) {
    background-color: #0060C0;
    
}

/* Selected marker */
.selected::part(expand-collapse-button) {
    color: white;
}

/* Hovered selected marker */
.selected::part(expand-collapse-button):hover {
    background-color: #0060C0;
}

/* Selected item text */
.selected > a.navigationTreeViewItem {
    color: white !important;
}