* {
    box-sizing: border-box;
}

/* ---------------------------------------------------- */
html, body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: auto;
    padding: 0;
    justify-content: center;
}

/* ---------------------------------------------------- */
h1:focus {
    outline: none;
}

/* ---------------------------------------------------- */
p {
    font-size: 14px;
    font-weight: normal;
}


/* ---------------------------------------------------- */
.fContainer {
    display: flex;
    flex-direction: row;
    gap: 5px;
    height: calc(100vh - 0.0em);
    justify-content: center;
    align-items: center;
}


/* ---------------------------------------------------- */
.grid-container {
    border: dotted solid 6px;
    grid-template-columns: min-content 1fr;
    grid-template-areas: "nav header" "nav main" "nav footer";
    grid-template-rows: min-content 1fr auto;
    display: grid;
    gap: 0.5em;
}

/* ---------------------------------------------------- */
.cell__details {
    margin: 0;
}

/* ---------------------------------------------------- */
.decorate__border {
    border: 5px solid #05B330;
    border-radius: 22px;
    border-style: dotted;
    padding: 1.0em;
}



/* ---------------------------------------------------- */
header {
    grid-area: header;
}

/* ---------------------------------------------------- */
nav {
    grid-area: nav;
    text-align: center;
}

/* ---------------------------------------------------- */
main {
    grid-area: main;
    line-height: 1.5;
}

/* ---------------------------------------------------- */
footer {
    grid-area: footer;
}




/* ---------------------------------------------------- */
.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem auto;
}
.linear-progress {
    background: silver;
    width: 20vw;
    margin: 20% auto;
    height: 0.5rem;
    border-radius: 10rem;
    overflow: hidden;
    position: relative;
}
.linear-progress:after {
    content: '';
    position: absolute;
    inset: 0;
    background: blue;
    scale: var(--blazor-load-percentage, 0%) 100%;
    transform-origin: left top;
    transition: scale ease-out 0.5s;
}
.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
    margin: 7% auto;
}
.loading-progress-text:after {
    content: var(--blazor-load-percentage-text, "Loading");
}
.loading-progress circle {
    fill: none;
    stroke: #e0e0e0;
    stroke-width: 0.6rem;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
}
.loading-progress circle:last-child {
    stroke: #1b6ec2;
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
    transition: stroke-dasharray 0.05s ease-in-out;
}



/* ---------------------------------------------------- */
img[src="https://res.gmm.ch/pict/rbl.jpg"] {
    /* 300x300 */
    width: 300px;
    height: 300px;
    border-radius: 15px;
    float: right;
    margin-right: 5px;
    margin-left: 5px;
}
img[src="https://res.gmm.ch/pict/geckologo.png"] {
    /* 286x284 */
    width:  286px;
    height: 284px;
}
img[src="https://res.gmm.ch/pict/geckologo_gis.png"] {
    /*298x297*/
    width:  298px;
    height: 297px;
}



/* --------------------------------------------- */
/* -------Media -------------------------------- */
/* --------------------------------------------- */
/*@media (width < 680px) {

    html, body {
        margin-top: 0.5em;
    }

    .grid-container {
        max-width: 400px;
    }

    header {
        font-size: 28px;
        font-weight: 900;
    }


    nav {
        display: none;
    }


    img[src="https://res.gmm.ch/pict/rbl.jpg"] {
        float:none;
        margin-right: 5px;
        width: 140px;
        height: 140px;
    }
}*/