@import '/_content/Waves.Tooling.App.Core/css/fonts.css';
@import '/_content/Waves.Tooling.App.Components/css/waves-app-component.css';

:root {
    color-scheme: var(--mud-native-html-color-scheme); /* link MudBlazor theme mode to the CSS styling system - allows css light-dark function to work */    
}

body {    
    height: 100%;
    overflow: hidden;
}

body:has(.loading-progress)::after {
    content: "";
    background-image: url("/logo.svg");
    background-position: right bottom;
    background-size: 50%;
    background-repeat: no-repeat;
    opacity: 0.2;
    top: 0;
    left: 0;
    bottom: 15px;
    right: 15px;
    position: absolute;
    z-index: -1;
}

blockquote p:last-child {
    margin-bottom: 0;
}

.home div[sm="4"], .home div[sm="6"], .home div[sm="8"] {
    border-bottom: 1px solid var(--neutral-stroke-divider-rest) !important;
}

/*.pageheader {
    width: 100%;
    background-color: var(--neutral-layer-1) !important; 
    box-shadow: calc(var(--stroke-width) * 1px) 0.1rem 0.3rem var(--neutral-layer-4);
    margin-bottom: 0 !important;
}

.pagefooter {
    width: 100%;
    background-color: var(--neutral-layer-1) !important;    
    box-shadow: calc(var(--stroke-width) * 1px) 0.1rem 0.3rem var(--neutral-layer-4);
    margin-bottom: 0 !important;
}*/

.search-result-icon {
    vertical-align: middle;
}

.footer {
    display: flex !important;
    flex-direction: row !important;
    background: var(--fill-color);
    color: var(--neutral-foreground-rest) !important;
    padding: 10px 10px;
    margin-top: 0px !important;
}

    .footer .version a {
        color: var(--neutral-foreground-rest);
        text-decoration: none;
    }

        .footer .version a:focus {
            outline: 1px dashed;
            outline-offset: 3px;
        }

        .footer .version a:hover {
            text-decoration: underline;
        }


/*nav.sitenav {
    display: flex;
    flex-direction: column;
    padding: 0.5rem 0.75rem 0.25rem 0.5rem;
    height: calc(100dvh - 100px);
    overflow-y: auto;
    background-color: var(--neutral-fill-layer-rest);
    box-shadow: calc(var(--stroke-width) * 1px) 0px 0.25rem var(--accent-fill-rest);
}*/

nav h2 {
    font-size: var(--type-ramp-plus-1-font-size);
    line-height: var(--type-ramp-plus-1-line-height);
    padding: 15px 0;
    margin: 0;
    pointer-events: none;
}

nav h3 {
    font-size: var(--type-ramp-base-font-size);
    line-height: var(--type-ramp-minus-1-line-height);
    padding: 10px 0;
    margin: 0;
    pointer-events: none;
}

/* Fixed width navigation for non-mobile breakpoints */
ul.news {
    padding-left: 0;
    list-style-type: none;
}

    ul.news li {
        display: flex;
        gap: calc(var(--design-unit) * 2px);
        align-items: center;
        padding-bottom: calc(var(--design-unit) * 2px);
    }

.news .calendar {
}

.news a {
    font-size: var(--type-ramp-plus-1-font-size);
    line-height: var(--type-ramp-plus-1-line-height);
    font-weight: 600;
    text-decoration: none;
}

#color {
    margin-right: 10px;
    margin-left: 0;
}

[dir="rtl"] #color {
    margin-left: 10px;
    margin-right: 0;
}


label {
    color: var(--neutral-foreground-rest);
    cursor: pointer;
}

.shell, .sourceCode {
    background: var(--neutral-stroke-layer-rest);
    padding: 7px;
}

code {
    background: var(--neutral-stroke-layer-rest);
}

.demopanel {
    border: 1px dashed var(--accent-fill-rest);
    padding: 5px;
}

.highlighted {
    background-color: var(--accent-stroke-control-active);
}

    .highlighted > td {
        color: var(--neutral-fill-inverse-rest);
    }


kbd {
    padding: 0.10rem 0.25rem;
    font-size: 0.875em;
    color: var(--neutral-foreground-rest);
    background-color: var(--neutral-fill-secondary-rest);
    border-radius: 0.25rem;
    border: 1px solid var(--accent-fill-rest);
}

#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;
    margin: 20px 0;
    color: var(--neutral-foreground-rest);
}

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

.blazor-error-boundary {
    border: 1px dashed var(--error);
    background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nNDgnIGhlaWdodD0nNDgnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZycgeG1sbnM6eGxpbms9J2h0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsnIG92ZXJmbG93PSdoaWRkZW4nIGZpbGw9JyNCQzJGMzInPjxwYXRoIGQ9J0MyNCA0YTIwIDIwIDAgMSAwIDAgNDAgMjAgMjAgMCAwIDAgMC00MFptMCA5Yy42OSAwIDEuMjUuNTYgMS4yNSAxLjI1djEyLjVhMS4yNSAxLjI1IDAgMSAxLTIuNSAwdi0xMi41YzAtLjY5LjU2LTEuMjUgMS4yNS0xLjI1Wm0wIDIxYTIgMiAwIDEgMSAwLTQgMiAyIDAgMCAxIDAgNFonPjwvcGF0aD48L3N2Zz4=") no-repeat 1rem/1.8rem;
    padding: 1rem 1rem 1rem 3.7rem;
}

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

#logo-anim path:nth-child(1) {
    stroke-dasharray: 2000;
    stroke-dashoffset: 2000;
    stroke-width: 1.25em;
    fill: #682A7B;
    fill-opacity: 0.1;
    animation: line-anim 2s ease forwards, fill-anim 1s ease forwards 1.5s;
}

#logo-anim path:nth-child(2) {
    stroke-width: 1.25em;
    stroke-dasharray: 2000;
    stroke-dashoffset: 2000;
    fill: #4A81C3;
    fill-opacity: 0.1;
    animation: line-anim 2s ease forwards, fill-anim 3s ease forwards 1.2s;
}

@keyframes line-anim {
    to {
        stroke-dashoffset: 0;
        stroke-width: 0;
    }
}

@keyframes fill-anim {
    from {
        fill-opacity: 0.1;
    }

    to {
        fill-opacity: 1;
    }
}

@media (max-width: 767px) {

    /*.siteheader {
        grid-area: header;
        grid-template-columns: 150px 1fr;
        align-items: center;
        justify-content: flex-start;
    }

        
        .siteheader .logo {
            width: 160px;
            height: 23px;*/
            /*padding: 0 25px;*/
        /*}


    */

/*    .navmenu {
        z-index: 499;
        box-shadow: calc(var(--stroke-width) * 1px) calc(var(--stroke-width) * 1px) 0.5rem var(--accent-fill-rest);
        width: 100%;
    }

    #navmenu-toggle {
        appearance: none;
    }    

    [dir="rtl"] .navmenu-icon {
        left: 20px;
        right: unset
    }

    #navmenu-toggle ~ nav {
        display: none;
    }

    #navmenu-toggle:checked ~ nav {
        display: block;
        position: absolute;
    }

    #navmenu-toggle ~ article {
        display: block;
    }

    #navmenu-toggle:checked ~ article {
        display: none;
    }*/

    /*.content {
        flex-direction: column;
        padding: 0.5rem 0.25rem 0.5rem 0.25rem;
    }*/

    /*article {
        padding-top: 0px;
        width: 100%;
    }*/

/*    .footer {
        display: grid;
        grid-template-columns: 10px auto 10px;
    }*/

    /*.footer .version {
            grid-column: 2;
            justify-self: start;
        }*/

/*    .footer .copy {
            grid-column: 2;
            grid-row: 2;
            justify-self: end;
        }*/


    @media screen and (max-width: 767px) and (orientation: landscape) {

        nav {
            padding: 25px 40px;
        }

            nav ul {
                margin: 0 0;
            }
    }
}

/* Surface Duo specific styling */
@media (horizontal-viewport-segments: 2) {
    
    main {
        display: grid;
        grid-template-columns: env(viewport-segment-width 0 0) 1fr;
        grid-template-rows: repeat(0, 1fr);
    }

    nav {
        grid-column: 1;
        width: env(viewport-segment-width 0 0) !important;
    }

   /* .content {
        display: grid;
        grid-template-columns: auto;
    }    */

    /*article {
        grid-area: 1 / 2 / 2 / 3;
        padding-top: 0px;
        margin-inline-start: calc(env(viewport-segment-left 1 0) - env(viewport-segment-right 0 0));*/ /* hinge width */
        /*margin-inline-end: calc(100% - env(viewport-segment-left 1 0));
        width: auto;
    }*/
}

@media print {
    pre, code {
        white-space: pre-wrap !important;
        word-wrap: break-word !important;
    }

    body {
        overflow: visible !important;
        height: auto !important;
    }

    .body-content {
        overflow: hidden !important;
        max-height: 100% !important;
    }

    h2:nth-of-type(n+2) {
        page-break-before: always !important;
    }


    h3, h4, h5, h6 {
        page-break-after: avoid !important;
    }

    fluent-tab-panel {
        page-break-inside: avoid !important;
    }

    .navmenu, .siteheader {
        visibility: hidden !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .layout > footer {
        visibility: hidden !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    a {
        text-decoration: none;
        color: black;
    }

        a::after {
            content: " (" attr(href) ")";
            font-size: 12px;
            color: #555;
        }
    
    button {
        display: none !important;
    }

    /*article {
        padding: 0 !important;
        border-right: hidden !important;
    }*/

    .video-link {
        display: block;
        font-size: 12pt;
        color: black;
    }

    img {
        width: auto !important; /* Shrinks oversized images */
        max-height: 250px !important; /* Limits vertical size */
        display: block; /* Prevents inline scaling issues */
    }
}

@media screen {
    .video-link {
        display: none;
    }
}

/*NEW*/

/*ToDo: make this more generic for common use */
.waves-page-layout-host-stack {
/*    row-gap: 0.5rem !important;*/
}

.waves-component-layout-host-stack {
/*    row-gap: 0.5rem !important;*/
}


/*END NEW*/

/* Media Queries for Browser Size */

/* --- Media quries for specific breakpoints sizes --- */
@media (width < 600px) {
    /* xs: 0 – 599.99px */
}

@media (600px <= width < 960px) {
    /* sm: 600 – 959.99px */
}

@media (960px <= width < 1280px) {
    /* md: 960 – 1279.99px */
}

@media (1280px <= width < 1920px) {
    /* lg: 1280 – 1919.99px */
}

@media (1920px <= width < 2560px) {
    /* xl: 1920 – 2559.99px */
}

@media (width >= 2560px) {
    /* xxl: 2560px+ */
}
/* --- Media quries for specific breakpoints sizes --- */

/* --- Cumulative Breakpoints (and under) --- */
@media (width < 960px) {
    /* sm and under: xs + sm (0 – 959.99px) */
}

@media (width < 1280px) {
    /* md and under: xs + sm + md (0 – 1279.99px) */
}

@media (width < 1920px) {
    /* lg and under: xs + sm + md + lg (0 – 1919.99px) */
}

@media (width < 2560px) {
    /* xl and under: xs + sm + md + lg + xl (0 – 2559.99px) */
}
/* --- END Cumulative Breakpoints (and under) --- */

/* END - Media Queries for Broser Size */


/* MudBlazor MudListItem enhancements */
.waves-mli-align-start {
    align-items: flex-start;
}
/* END MudBlazor MudListItem enhancements */




/* MudBlazor Override - Sankey CHart */

/* When the last (bottom) item in the sankey chart is very small, then the label is clipped inside the chart
    real fix is in Mudblazor where the svg viewbox needs to be slightly bigger. Temporary fix is here where
    we can set overflow:visible on the svg and the clipping stops.
*/
.mudblazor-sankey-chart-svg-overflow-visible > div.mud-chart-sankey > svg {
    overflow: visible;
}

/* END MudBlazor Override - Sankey CHart */