/*@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');*/

/*html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    overflow-y:hidden;*/      /* disables visible Y scroll bar, else shown when loading */        
    /*--bf-header-h: 45px;
    --bf-header-top: 0px;
    --screen-md: 0;
}

    body > #app {

    }

h1:focus {
    outline: none;
}

a, .btn-link {
    color: #0071c1;
}*/
/* CHECK if NEEDED - remove */
/*
    - ldr-brand
    - what is/was ldr-info ??
*/
/* end remove/needed check */

#app {
    height: 100%;
}

#app .page > main {
    height: calc(100% - var(--bf-header-h));
}

article {
    width: 100%;
    height:100%;
    overflow: hidden;
}

    article > .container-fluid {
        height: 100%;
        width: 100%;
        overflow: hidden;
    }

body.modal-open .modal-backdrop.show {
    z-index:1;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#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 br {
        content:'';
        display:none;
    }

    #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."
    }

/*.bf-content {*//* from default 'content' class - the 'article' element from MainLayout */
/*    --bf-header-h: 45px;
    --screen-md: 0;*/
/*}

.bf-header {*/
    /*--bf-header-height: 45px;*/       /* todo: this to .bf-content class */
    /*height:var(--bf-header-h); < (opt) */
    /*box-sizing: border-box;
    z-index:1;*/             /*old : 10 -  so über swiper/content view leider aber auch im mobile lk mode foto oben abgesägt \-/ */
/*}

.bf-header-inner {*/
    /*background-color: #363636;
    background: linear-gradient(0deg, #d3cce3,#e9e4f0);*/ /*linear-gradient(0deg, rgba(54,54,54,0.9288109570014768) 0%, rgba(56,113,30,0.8861280301722084) 46%, rgba(210,255,0,0.8160060789526963) 100%);*/
    /*padding-top: .1rem;*/
    /*padding-bottom: .1rem;
      font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    */
    /*background-color: rgba(212,214,216,.82);
    box-shadow: inset 0 0 14px 8px rgba(240,242,244,.8);
    padding: 0 .2rem .1rem .2rem;
    color: rgba(90,132,30,.96);
}

    .bf-header-inner > .row > .col-auto:first-child {
        padding-left:0;
    }

    .bf-header-inner .bf-brand {
        font-size: 1.8rem;
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        user-select:none;
        text-decoration:none;
        color:inherit!important;*/    /* the green from bf-header-inner */
    /*}

        .bf-brand img {
            height:2.2rem;
            padding:0 .2rem;
        }

        .bf-brand div {
            padding: 0 .2rem;
        }

    .bf-header-inner .bf-user-dropdown {
        margin:.1rem .2rem auto auto;
        z-index:5;*/         /* clickable overlaying map-drop */
    /*}

    .bf-header-inner .bf-user-dropdown > a {
        text-decoration:none;
        color:var(--bs-gray-700);
    }

    .bf-header-inner .bf-user-dropdown > a > i.bi {
        margin-top:.175rem;
        font-size:1.6rem;
        margin-right:.125rem;
        display:flex;
        color:rgba(72,75,78,.8);
    }

        .bf-header-inner .bf-user-dropdown > a > i.bi::before {
            text-shadow: -1px -1px 2px var(--bs-gray-500);
        }

    .bf-header-inner .dropdown-toggle::after {*/
        /*vertical-align: text-top;*/
        /*margin-top:.36em;
        margin-left: -.05rem;
    }

    .bf-user-dropdown ul > li:first-child > a {*/     /* the user account (settings) link */
        /*display:flex;
        align-items:center;
        column-gap:.5rem;
    }*/

/*.bf-content .ldr-brand {    /* the client sided part of the login branding (tree round) */
    /*display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    width: 100%;
    height: calc(100% - var(--bf-header-h) - var(--bf-header-top));
}

    .bf-content .ldr-brand > div > :last-child {
        font-size:1.075rem;
        margin:-.8rem 1.6rem 0 0;
    }

        .bf-content .ldr-brand > div > :last-child > small {
            margin-top:1.3rem;   
        }*/

.bf-content .ldr-info {
    margin-top:.25rem;
    align-items:center;
    display:flex;
}
/*@media (min-width:1200px) and (min-aspect-ratio:3/4) {*/
/*}*/

/*	 		DEBUG ONLY CLASSES 		*/
.disp-sz {
    background-color: var(--bs-primary);
}

    .disp-sz :first-child::before {
        content: 'main base class for all screens';
    }

/*    all 'handheld' mobile devices     */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* old : (max-width: 1080px) and (max-height:599.5px) and (max-aspect-ratio:3/1)*/
@media (max-width: 1080px) and (max-height:599.5px) and (max-aspect-ratio:9/1), (max-width:768.5px) and (max-aspect-ratio:3/3) and (max-height:1080px) {
    html,body {
        --bf-header-h: 2.125rem;
        --bf-header-top: .4rem;
        /*height:min(var(--vvh), 100vh)!important;*/
        width:100%;
    }

    #app .page > main {
        height:100%;
    }

    /*#app {
        height:100%;
    }*/

    #bf-pl-brand + #app {
        height:auto;        /* no scroll when showing rnd tree on login */
    }

/*    .page, main {             // now moved to _layout pg
        height: 100%;
        width: 100%;
    }

    article {
        height: 100%;
        width: 100%;
    }*/


    .vis-data-axis {            /* TODO :: move this to timeline!! */
        font-size: .8rem;
    }

    .vis-time-axis .vis-text {
        font-size:.8rem;
    }

/*    .bf-content {
        --bf-header-height:34px;
    }*/
    #bf-pl-brand .bf-header {   /* the 'loading dummy' header from _layout.cshtml page */
        margin-top:var(--bf-header-top);
        margin-left:1vw;
    }

    .bf-header {   
        position:absolute;
        width:98vw;
        left:1vw;
        top:var(--bf-header-top);
        /*top:.4rem;
        z-index:2;*/
    }

    .bf-header-inner {
        border-radius: .6rem;
        /*background:rgba(0,0,0,.14);
        background: rgba(198,200,202,.54);*/
        /*background: rgba(212,213,214,.72);*/
        height: var(--bf-header-height);
    }

    .bf-header-inner .bf-user-dropdown > a > i.bi {
        font-size:1.55rem;
        margin-top:.275rem;
    }

    .bf-header-inner .bf-brand {
        font-size:24px;
        margin-top:-.15rem;
        /*font-weight:600;
        color:rgba(80,110,40,.98);*/
        filter:drop-shadow(1px 1px var(--bs-gray-400));
    }

        .bf-brand img {
            height:2rem;
            padding:0 .1rem;
            margin-top:.2rem;
        }

        .bf-brand div {
            margin-bottom:-.05rem;
        }

    .bf-header-inner .bf-user-dropdown {
        margin-top:0;
    }

    /*.bf-content > div[role="alert"] {
    .bf-content > .ldr-info{
        position: absolute;
        top: var(--bf-header-h);
    }*/

    .bf-header.spg {            /* header as shown on subpages like about */
        --bf-header-top:0;
        position:relative; /* same here as sticky, that has issues with z-index (problems with eg list-group-item in page (all with position:relative; overlaps menu then)) */
        width:100%;
        left:auto;
        z-index:auto;
    }

/*    .bf-content .ldr-brand {
        margin-top: calc(var(--bf-header-h) + var(--bf-header-top));
    }*/

    .bf-content .ldr-info {
        position: absolute;
        top: var(--bf-header-h);
        margin-top: calc(var(--bf-header-top) + .25rem);
    }

    /*.vis-y-axis{

    }

        .vis-y-axis.vis-major {
            display:none;
        }*/

    /*	 		DEBUG ONLY CLASSES 		*/
    .disp-sz {
        background-color: burlywood;            /* this marker should never show up as this base class only covers for small hk and lk displays below */
    }

        .disp-sz :first-child::before {
            content: 'base class for small mobile screens (max-W(1080) and max-H(599.5) and max:(10/4)) || (max-W(768.5) and max-H(1080) and max:(3/5))';
        }
}

@media (max-width:768.5px) {
    html.stbf, html.stbf > body {
        height:100%!important;/*height: calc(100% - 2.2em)!important;*/
    }

    html.stbf > body > #app {
        height:auto;
    }
}

/*       small mobile hk displays       */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
@media (max-width:768.5px) and (max-aspect-ratio: 3.4/5) {
/*    .bf-content {
        --screen-md: 2;
    }*/
    body > #app {
        --screen-md:2;
    }

    #blazor-error-ui br {
        content: none;
        display: block;
    }

    /*	 		DEBUG ONLY CLASSES 		*/
    .disp-sz {
        background-color: red;
    }

        .disp-sz :first-child::before {
            content: 'small mobile screens hk format up to max-W(768.5) and max:(3.4/5)';
        }
}

/*        small mobile lk displays      */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
@media (max-width: 1080px) and (min-aspect-ratio: 8.6/5) {
    body > #app {
        --screen-md: 3;
    }

    /*	 		DEBUG ONLY CLASSES 		*/
    .disp-sz {
        background-color: darkgoldenrod;
    }

        .disp-sz :first-child::before {
            content: 'small mobile screens lk format up to max-W(1080) and max:(8.6/5)';
        }
}

/* tablet lk formats and laptop screens */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
@media (min-width:960px) and (max-width:1442.5px) and (max-aspect-ratio:4/2.5) {


    /*	 		DEBUG ONLY CLASSES 		*/
    .disp-sz {
        background-color: orange;
    }

        .disp-sz :first-child::before {
            content: 'tablet/laptop mobile screens lk format from min-W(960px) up to max-W(1080) and max:(4/2.5)';
        }
}

/*            tablet hk formats         */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
@media (min-width:600px) and (max-width:1682.5px) and (max-aspect-ratio:4/5) {



    /*	 		DEBUG ONLY CLASSES 		*/
    .disp-sz {
        background-color: blueviolet;
    }

        .disp-sz :first-child::before {
            content: 'tablet mobile screens hk format from min-W(600px) up to max-W(1682.5) and max:(4/5)';
        }
}

/* (extremly) wide (desktop) screen formats */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
@media (min-width: 1920.5px) and (max-aspect-ratio:5/2) {

    /* bfcal --> top dropdown menu to inline-flex */
    .cal-top-menu .btn-group {
        height: 2.2rem;
        width:auto!important;
    }

    .cal-top-menu .btn-group button {
        display:none!important;
    }

    .cal-top-menu .btn-group ul {
        display:inline-flex;
        padding:0;
        position:relative;
        background-color:var(--bs-secondary);
    }


    /*	 		DEBUG ONLY CLASSES 		*/
    .disp-sz {
        background-color: var(--bs-success);
    }

        .disp-sz :first-child::before {
            content: 'wide (desktop) screen lk formats from min-W(1920.5px) up and max:(5/2)';
        }	
}

/*@media (min-width:2000px) and (min-aspect-ratio:5/3) {
    .content-view.lmd.bf-dlg {
        background-color:red;
        --bfd-full-h:80vh;
        --bfd-full-w:calc(var(--bfd-full-h)/3*2);
    }
}*/

/*@keyframes kfdelay {
    0%,80% {
        opacity:0;
    }
    100% {
        opacity:100%;
    }
}*/
/* fa LoginDisplay Icon */



    /*************************/
    /* Loading spinner      */
    /***********************/

    /* sk-spinner */
    .sk-spinner {
        width: 100%;
        height: 100%;
        position: relative;
    }

        .sk-spinner .sk-spinner-child {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
        }

            .sk-spinner .sk-spinner-child:before {
                content: '';
                display: block;
                margin: 0 auto;
                width: 15%;
                height: 15%;
                /*background-color: #333;*/
                /*background-color: olive;*/
                /*background-color: #15a362;*/
                /*background-color: #556B2F9F;*/
                background-color: rgba(90,146,56,.8);
                border-radius: 100%;
                -webkit-animation: sk-spinnerBounceDelay 1.2s infinite ease-in-out both;
                animation: sk-spinnerBounceDelay 1.2s infinite ease-in-out both;
            }

        .sk-spinner .sk-spinner2 {
            -webkit-transform: rotate(30deg);
            -ms-transform: rotate(30deg);
            transform: rotate(30deg);
        }

        .sk-spinner .sk-spinner3 {
            -webkit-transform: rotate(60deg);
            -ms-transform: rotate(60deg);
            transform: rotate(60deg);
        }

        .sk-spinner .sk-spinner4 {
            -webkit-transform: rotate(90deg);
            -ms-transform: rotate(90deg);
            transform: rotate(90deg);
        }

        .sk-spinner .sk-spinner5 {
            -webkit-transform: rotate(120deg);
            -ms-transform: rotate(120deg);
            transform: rotate(120deg);
        }

        .sk-spinner .sk-spinner6 {
            -webkit-transform: rotate(150deg);
            -ms-transform: rotate(150deg);
            transform: rotate(150deg);
        }

        .sk-spinner .sk-spinner7 {
            -webkit-transform: rotate(180deg);
            -ms-transform: rotate(180deg);
            transform: rotate(180deg);
        }

        .sk-spinner .sk-spinner8 {
            -webkit-transform: rotate(210deg);
            -ms-transform: rotate(210deg);
            transform: rotate(210deg);
        }

        .sk-spinner .sk-spinner9 {
            -webkit-transform: rotate(240deg);
            -ms-transform: rotate(240deg);
            transform: rotate(240deg);
        }

        .sk-spinner .sk-spinner10 {
            -webkit-transform: rotate(270deg);
            -ms-transform: rotate(270deg);
            transform: rotate(270deg);
        }

        .sk-spinner .sk-spinner11 {
            -webkit-transform: rotate(300deg);
            -ms-transform: rotate(300deg);
            transform: rotate(300deg);
        }

        .sk-spinner .sk-spinner12 {
            -webkit-transform: rotate(330deg);
            -ms-transform: rotate(330deg);
            transform: rotate(330deg);
        }

        .sk-spinner .sk-spinner2:before {
            -webkit-animation-delay: -1.1s;
            animation-delay: -1.1s;
        }

        .sk-spinner .sk-spinner3:before {
            -webkit-animation-delay: -1s;
            animation-delay: -1s;
        }

        .sk-spinner .sk-spinner4:before {
            -webkit-animation-delay: -0.9s;
            animation-delay: -0.9s;
        }

        .sk-spinner .sk-spinner5:before {
            -webkit-animation-delay: -0.8s;
            animation-delay: -0.8s;
        }

        .sk-spinner .sk-spinner6:before {
            -webkit-animation-delay: -0.7s;
            animation-delay: -0.7s;
        }

        .sk-spinner .sk-spinner7:before {
            -webkit-animation-delay: -0.6s;
            animation-delay: -0.6s;
        }

        .sk-spinner .sk-spinner8:before {
            -webkit-animation-delay: -0.5s;
            animation-delay: -0.5s;
        }

        .sk-spinner .sk-spinner9:before {
            -webkit-animation-delay: -0.4s;
            animation-delay: -0.4s;
        }

        .sk-spinner .sk-spinner10:before {
            -webkit-animation-delay: -0.3s;
            animation-delay: -0.3s;
        }

        .sk-spinner .sk-spinner11:before {
            -webkit-animation-delay: -0.2s;
            animation-delay: -0.2s;
        }

        .sk-spinner .sk-spinner12:before {
            -webkit-animation-delay: -0.1s;
            animation-delay: -0.1s;
        }

    @-webkit-keyframes sk-spinnerBounceDelay {
        0%, 80%, 100% {
            -webkit-transform: scale(0);
            transform: scale(0);
        }

        40% {
            -webkit-transform: scale(1);
            transform: scale(1);
        }
    }

    @keyframes sk-spinnerBounceDelay {
        0%, 80%, 100% {
            -webkit-transform: scale(0);
            transform: scale(0);
        }

        40% {
            -webkit-transform: scale(1);
            transform: scale(1);
        }
    }