<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
    <title>REA</title>
    <base href="/" />
    <link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500,700&display=swap" rel="stylesheet" />
    <link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />
    <!-- This file is only needed (and apparently also only generated) if there are any Page or Component specific styles used. -->
    <link href="REA.WebClient.Client.styles.css" rel="stylesheet" />
    <link href="css/fsh.css" rel="stylesheet" />
    <link href="manifest.json" rel="manifest" />
    <link rel="apple-touch-icon" sizes="512x512" href="rea-logo-2.png" />
    <link rel="apple-touch-icon" sizes="192x192" href="rea-logo-2.png" />
    <script type="text/javascript">
        (function (c, l, a, r, i, t, y) {
            c[a] = c[a] || function () { (c[a].q = c[a].q || []).push(arguments) };
            t = l.createElement(r); t.async = 1; t.src = "https://www.clarity.ms/tag/" + i;
            y = l.getElementsByTagName(r)[0]; y.parentNode.insertBefore(t, y);
        })(window, document, "clarity", "script", "k61nd9mas5");
    </script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/viewerjs/1.10.4/viewer.min.css"
          integrity="sha512-OgbWuZ8OyVQxlWHea0T9Bdy1oDhs380WxLMaLZbuitQ/mdntHBPnApxbTebB9N5KoHZd3VMkk3G2cTY563nu5w=="
          crossorigin="anonymous"
          referrerpolicy="no-referrer" />
</head>

<body>
    <div id="app">
        <section><span class="loader-73"></span><span class="index">🐈‍⬛</span></section>
        <style>
            :root {
                --base: #263238;
                --lite: #993537;
                --brand: #FF3D00;
                --size: 48px;
            }


            .index {
                margin-bottom: 1rem;
                position: relative;
            }

            *,
            *:after,
            *:before {
                box-sizing: border-box;
            }

            ::-webkit-scrollbar {
                width: 8px;
                height: 8px;
            }

            section {
                width: 70%;
                height: 100vh;
                display: flex;
                align-items: center;
                justify-content: center;
                color: #ccc;
                cursor: pointer;
                transition: 0.3s linear;
                margin-left: auto;
                margin-right: auto;
                margin-top: auto;
                &:nth-child(2n + 1)

            {
                background: rgba(#000, 0.1);
            }

            &:hover {
                background: rgba(#000, 0.3);
            }

            @media (max-width: 768px) {
                width: 50%;
            }

            @media (max-width: 480px) {
                width: 100%;
            }

            }

            .loader-73 {
                width: 10px;
                height: calc(var(--size) / 10);
                display: inline-block;
                position: relative;
                background: var(--lite);
                box-shadow: 0 0 10px rgba(var(--lite), 0.5);
                animation: animFw 60s linear infinite;
                &::after, &::before

            {
                content: '';
                width: 10px;
                height: 1px;
                background: var(--lite);
                position: absolute;
                top: 9px;
                right: -2px;
                opacity: 0;
                transform: rotate(-45deg) translateX(0px);
                animation: coli1 0.3s linear infinite;
            }

            &::before {
                top: -4px;
                transform: rotate(45deg);
                animation: coli2 0.3s linear infinite;
            }

            }

            /* keyFrames */
            @keyframes animFw {
                0% {
                    width: 0
                }

                100% {
                    width: 100%
                }
            }

            @keyframes coli1 {
                0% {
                    transform: rotate(-45deg) translateX(0px);
                    opacity: 0.7;
                }

                100% {
                    transform: rotate(-45deg) translateX(-45px);
                    opacity: 0;
                }
            }

            @keyframes coli2 {
                0% {
                    transform: rotate(45deg) translateX(0px);
                    opacity: 1;
                }

                100% {
                    transform: rotate(45deg) translateX(-45px);
                    opacity: 0.7;
                }
            }
        </style>
    </div>

    <div id="blazor-error-ui">
        An unhandled error has occurred.
        <a href="" class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    </div>
    <script src="_content/Microsoft.Authentication.WebAssembly.Msal/AuthenticationService.js"></script>
    <script src="_framework/blazor.webassembly.js" autostart="false"></script>
    <script src="_content/MudBlazor/MudBlazor.min.js"></script>
    <script src="js/jsInterop.js"></script>
    <script src="_content/Toolbelt.Blazor.PWA.Updater.Service/script.min.js"></script>

    <script>
        // https://learn.microsoft.com/en-us/aspnet/core/blazor/fundamentals/environments?view=aspnetcore-7.0#set-the-environment-via-startup-configuration
        if (window.location.host.includes("localhost:8080")) {
            Blazor.start({
                environment: "Localhost"
            });
        }
        else if (window.location.host.includes("localhost:5003")
            || window.location.hostname.includes("127.0.0.1")
            || window.location.hostname.includes("192.168")) {
            Blazor.start({
                environment: "Development"
            });
        } else {
            Blazor.start({
                environment: "Production"
            });
        }
    </script>

    <script>
        var themeManager = JSON.parse(window.localStorage.getItem("clientPreference"));
        var primaryColor = '#2462af';
        var baseColor = '#ffffff';
        if (themeManager) {
            if (themeManager.PrimaryColor) {
                primaryColor = themeManager.PrimaryColor;
            }
            if (themeManager.IsDarkMode) {
                baseColor = '#1b1f22';
            }
        }
        var elements = document.getElementsByClassName('fsh-wasm');
        for (var i = 0; i < elements.length; i++) {
            elements[i].style.backgroundImage = 'linear-gradient(-120deg,' + primaryColor + ' 50%,' + baseColor + ' 50%)';
        }
    </script>

    <script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/viewerjs/1.10.4/viewer.min.js"
            integrity="sha512-2HLzgJH7ZNywnEDB1HqijieFxszStt3QXS8Qk9m/VMUV/asMWlz9PmibHsvWIz9rtKOOr28z8zu1iJ3pf/TTHQ=="
            crossorigin="anonymous"
            referrerpolicy="no-referrer">
    </script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"
            integrity="sha512-Qlv6VSKh1gDKGoJbnyA5RMXYcvnpIqhO++MhIM2fStMcGT9i2T//tSwYFlcyoRRDcDZ+TYHpH8azBBCyhpSeqw=="
            crossorigin="anonymous"
            referrerpolicy="no-referrer">
    </script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.7.1/jszip.min.js"
            integrity="sha512-xQBQYt9UcgblF6aCMrwU1NkVA7HCXaSN2oq0so80KO+y68M+n64FOcqgav4igHe6D5ObBLIf68DWv+gfBowczg=="
            crossorigin="anonymous"
            referrerpolicy="no-referrer">
    </script>
</body>

</html>