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

* {
    box-sizing: border-box;
    /* outline: 1px dashed #f00; */
}

html, body {
    margin: 0;
    width: unset;
    height: 100vh;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: #eeeeee;
}

canvas {
    width: 100%;
    height: 100%;
}

.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 .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

pre,
div.error {
    background-color: #e5e5e5;
    padding: 1rem;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
    border-radius: 3px;
    margin: 1rem 0;
    max-height: 250px;
}

    pre.fixed,
    div.error.fixed {
        height: 200px;
    }

code {
    background-color: #e5e5e5;
    display: inline-block;
    padding: 0px 6px;
    border-radius: 3px;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
}

.profile {
    display: flex;
    margin: 0.5em;
    /*margin-right: auto;*/
    background-color: white;
    width: 250px;
    box-shadow: 0px 8px 10px rgba(0, 0, 0, 0.1);
    border-radius: 3px;
}

    .profile > .left {
        margin: 0.5em;
        width: 90px;
    }

        .profile > .left > p {
            margin: 0 -0.4em;
            text-align: center;
        }

            .profile > .left > p > a {
                color: black;
            }

                .profile > .left > p > a > svg {
                    width: 24px;
                    height: 24px;
                }

        .profile > .left > .avatar {
            margin: 0.5em;
            height: 48px;
            width: 48px;
        }

    /*.profile > .left > .avatar[availabilty^=Available] {
                border: 3px solid lawngreen;
            }

            .profile > .left > .avatar[availabilty^=Busy] {
                border: 3px solid red;
            }

            .profile > .left > .avatar[availabilty^=Away] {
                border: 3px solid yellow;
            }

            .profile > .left > .avatar[availabilty^=BeRi] {
                border: 3px solid yellow;
            }

            .profile > .left > .avatar[availabilty^=DoNot] {
                border: 3px solid red;
            }
*/
    .profile > .info {
        margin: 1em 0.5em 0.5em 0.5em;
        width: 100%;
        font-size: 12px;
    }

        .profile > .info > h3 {
            margin: 0;
            margin-block-end: 0;
            font-size: 14px;
        }

        .profile > .info > p {
            margin: 0;
        }

        .profile > .info > .presence {
            margin-top: -10px;
            float: right;
        }

            .profile > .info > .presence[availabilty^=Available]::after {
                content: "";
                width: 1em;
                height: 1em;
                background-image: url("data:image/svg+xml;charset=utf-8,%0A%3Csvg%20id%3D%22Layer_1%22%20data-name%3D%22Layer%201%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%209.997%2010.003%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%2392c353%3B%7D.cls-2%7Bfill%3A%23fff%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3E1_Presence_Available_Light_theme_2_10px%3C%2Ftitle%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M6.311.176A5%2C5%2C0%2C0%2C1%2C9.82%2C3.689a4.944%2C4.944%2C0%2C0%2C1%2C0%2C2.622%2C5.233%2C5.233%2C0%2C0%2C1-.506%2C1.2A5.038%2C5.038%2C0%2C0%2C1%2C8.53%2C8.53a4.974%2C4.974%2C0%2C0%2C1-1.01.782%2C5.089%2C5.089%2C0%2C0%2C1-1.207.51%2C4.931%2C4.931%2C0%2C0%2C1-2.624%2C0%2C5.043%2C5.043%2C0%2C0%2C1-1.2-.511A4.807%2C4.807%2C0%2C0%2C1%2C1.47%2C8.53%2C4.907%2C4.907%2C0%2C0%2C1%2C.688%2C7.515a5.1%2C5.1%2C0%2C0%2C1-.51-1.2%2C4.931%2C4.931%2C0%2C0%2C1%2C0-2.624A5.03%2C5.03%2C0%2C0%2C1%2C2.488.68a5.214%2C5.214%2C0%2C0%2C1%2C1.2-.506%2C4.959%2C4.959%2C0%2C0%2C1%2C2.626%2C0Z%22%20transform%3D%22translate(0%200.003)%22%2F%3E%3Cpath%20class%3D%22cls-2%22%20d%3D%22M6.821%2C3.594a.514.514%2C0%2C0%2C1%2C.152.1.549.549%2C0%2C0%2C1%2C.1.152.425.425%2C0%2C0%2C1%2C.039.175.454.454%2C0%2C0%2C1-.136.332l-2.1%2C2.11a.471.471%2C0%2C0%2C1-.664%2C0l-.957-.957a.447.447%2C0%2C0%2C1-.137-.332A.419.419%2C0%2C0%2C1%2C3.159%2C5a.463.463%2C0%2C0%2C1%2C.1-.151.509.509%2C0%2C0%2C1%2C.151-.1.426.426%2C0%2C0%2C1%2C.176-.039.418.418%2C0%2C0%2C1%2C.327.137l.63.625L6.314%2C3.691a.45.45%2C0%2C0%2C1%2C.332-.136A.425.425%2C0%2C0%2C1%2C6.821%2C3.594Z%22%20transform%3D%22translate(0%200.003)%22%2F%3E%3C%2Fsvg%3E");
                background-position: 0 0;
                background-repeat: no-repeat;
                display: inline-block;
                z-index: 1;
                margin-left: 0.5em;
            }

            .profile > .info > .presence[availabilty^=Away]::after {
                content: "";
                width: 1em;
                height: 1em;
                background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2012%2012%22%20enable-background%3D%22new%200%200%2012%2012%22%20xml%3Aspace%3D%22preserve%22%3E%3Cg%3E%3Cg%3E%3Ccircle%20fill%3D%22%23FDB913%22%20cx%3D%226%22%20cy%3D%226%22%20r%3D%226%22%2F%3E%3C%2Fg%3E%3Cpolyline%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%221.5%22%20stroke-miterlimit%3D%2210%22%20points%3D%226%2C2%206%2C6%208.5%2C8.5%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
                background-position: 0 0;
                background-repeat: no-repeat;
                display: inline-block;
                z-index: 1;
                margin-left: 0.5em;
            }

            .profile > .info > .presence[availabilty^=Busy]::after {
                content: "";
                width: 1em;
                height: 1em;
                background-image: url("data:image/svg+xml;charset=utf-8,%0A%3Csvg%20id%3D%22Layer_1%22%20data-name%3D%22Layer%201%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010%2010%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23c4314b%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3Eicn_status_ALL%3C%2Ftitle%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M.674%2C2.5A5.031%2C5.031%2C0%2C0%2C1%2C2.5.674%2C4.856%2C4.856%2C0%2C0%2C1%2C5%2C0%2C4.864%2C4.864%2C0%2C0%2C1%2C7.505.674%2C5.038%2C5.038%2C0%2C0%2C1%2C9.326%2C2.5%2C4.861%2C4.861%2C0%2C0%2C1%2C10%2C5a4.861%2C4.861%2C0%2C0%2C1-.674%2C2.505A5.038%2C5.038%2C0%2C0%2C1%2C7.505%2C9.326%2C4.864%2C4.864%2C0%2C0%2C1%2C5%2C10a4.856%2C4.856%2C0%2C0%2C1-2.5-.674A5.031%2C5.031%2C0%2C0%2C1%2C.674%2C7.505%2C4.861%2C4.861%2C0%2C0%2C1%2C0%2C5%2C4.861%2C4.861%2C0%2C0%2C1%2C.674%2C2.5Z%22%2F%3E%3C%2Fsvg%3E");
                background-position: 0 0;
                background-repeat: no-repeat;
                display: inline-block;
                z-index: 1;
                margin-left: 0.5em;
            }

            .profile > .info > .presence[availabilty^=BeRi]::after {
                content: "";
                width: 1em;
                height: 1em;
                background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2012%2012%22%20enable-background%3D%22new%200%200%2012%2012%22%20xml%3Aspace%3D%22preserve%22%3E%3Cg%3E%3Cg%3E%3Ccircle%20fill%3D%22%23FDB913%22%20cx%3D%226%22%20cy%3D%226%22%20r%3D%226%22%2F%3E%3C%2Fg%3E%3Cpolyline%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%221.5%22%20stroke-miterlimit%3D%2210%22%20points%3D%226%2C2%206%2C6%208.5%2C8.5%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
                background-position: 0 0;
                background-repeat: no-repeat;
                display: inline-block;
                z-index: 1;
                margin-left: 0.5em;
            }

            .profile > .info > .presence[availabilty^=Offline]::after {
                content: "";
                width: 1em;
                height: 1em;
                background-image: url("data:image/svg+xml;charset=utf-8,%0A%3Csvg%20id%3D%22Layer_1%22%20data-name%3D%22Layer%201%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010%2010%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23fff%3B%7D.cls-2%7Bfill%3A%23929292%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3Eicn_status_ALL%3C%2Ftitle%3E%3Ccircle%20class%3D%22cls-1%22%20cx%3D%225%22%20cy%3D%225%22%20r%3D%224%22%2F%3E%3Cpath%20class%3D%22cls-2%22%20d%3D%22M9.824%2C3.689A5.1%2C5.1%2C0%2C0%2C0%2C9.316%2C2.48a5.17%2C5.17%2C0%2C0%2C0-1.8-1.8A5.057%2C5.057%2C0%2C0%2C0%2C6.311.176%2C4.917%2C4.917%2C0%2C0%2C0%2C5%2C0%2C4.839%2C4.839%2C0%2C0%2C0%2C3.689.178a5.2%2C5.2%2C0%2C0%2C0-1.2.506A5.015%2C5.015%2C0%2C0%2C0%2C1.47%2C1.47%2C4.961%2C4.961%2C0%2C0%2C0%2C.688%2C2.48a5.085%2C5.085%2C0%2C0%2C0-.51%2C1.207%2C4.924%2C4.924%2C0%2C0%2C0%2C0%2C2.624%2C5.1%2C5.1%2C0%2C0%2C0%2C.51%2C1.2%2C4.982%2C4.982%2C0%2C0%2C0%2C1.8%2C1.8%2C5.1%2C5.1%2C0%2C0%2C0%2C1.2.51%2C4.924%2C4.924%2C0%2C0%2C0%2C2.624%2C0A5.081%2C5.081%2C0%2C0%2C0%2C7.52%2C9.311%2C4.921%2C4.921%2C0%2C0%2C0%2C8.53%2C8.53a5.079%2C5.079%2C0%2C0%2C0%2C.786-1.015%2C5.258%2C5.258%2C0%2C0%2C0%2C.506-1.2%2C4.944%2C4.944%2C0%2C0%2C0%2C0-2.622ZM8.859%2C6.054a3.91%2C3.91%2C0%2C0%2C1-.408.961A4.046%2C4.046%2C0%2C0%2C1%2C7.015%2C8.45a3.953%2C3.953%2C0%2C0%2C1-4.03%2C0A4.038%2C4.038%2C0%2C0%2C1%2C1.549%2C7.015a3.961%2C3.961%2C0%2C0%2C1%2C0-4.03A4.057%2C4.057%2C0%2C0%2C1%2C2.985%2C1.549a3.985%2C3.985%2C0%2C0%2C1%2C3.069-.408%2C3.959%2C3.959%2C0%2C0%2C1%2C.961.408A4.054%2C4.054%2C0%2C0%2C1%2C8.45%2C2.985a3.981%2C3.981%2C0%2C0%2C1%2C.409%2C3.069Zm-2-2.2L5.707%2C5%2C6.854%2C6.146l-.708.707L5%2C5.707%2C3.854%2C6.853l-.708-.707L4.293%2C5%2C3.146%2C3.853l.708-.707L5%2C4.293%2C6.146%2C3.146Z%22%2F%3E%3C%2Fsvg%3E");
                background-position: 0 0;
                background-repeat: no-repeat;
                display: inline-block;
                z-index: 1;
                margin-left: 0.5em;
            }

            .profile > .info > .presence[availabilty^=DoNot]::after {
                content: "";
                width: 1em;
                height: 1em;
                background-image: url("data:image/svg+xml;charset=utf-8,%0A%3Csvg%20id%3D%22Layer_1%22%20data-name%3D%22Layer%201%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010%2010%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23c4314b%3B%7D.cls-2%7Bfill%3A%23fff%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3Eicn_status_ALL%3C%2Ftitle%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M6.311.176A5.057%2C5.057%2C0%2C0%2C1%2C7.52.684a5.009%2C5.009%2C0%2C0%2C1%2C2.3%2C3.005%2C4.944%2C4.944%2C0%2C0%2C1%2C0%2C2.622%2C5.258%2C5.258%2C0%2C0%2C1-.506%2C1.2A5.079%2C5.079%2C0%2C0%2C1%2C8.53%2C8.53a4.94%2C4.94%2C0%2C0%2C1-1.011.782%2C5.1%2C5.1%2C0%2C0%2C1-1.206.51%2C4.924%2C4.924%2C0%2C0%2C1-2.624%2C0%2C5.042%2C5.042%2C0%2C0%2C1-1.2-.511A4.819%2C4.819%2C0%2C0%2C1%2C1.47%2C8.53%2C4.883%2C4.883%2C0%2C0%2C1%2C.688%2C7.515a5.1%2C5.1%2C0%2C0%2C1-.51-1.2%2C4.928%2C4.928%2C0%2C0%2C1%2C0-2.625A5.1%2C5.1%2C0%2C0%2C1%2C.688%2C2.48%2C4.961%2C4.961%2C0%2C0%2C1%2C1.47%2C1.47%2C5.015%2C5.015%2C0%2C0%2C1%2C2.485.684a5.214%2C5.214%2C0%2C0%2C1%2C1.2-.506A4.839%2C4.839%2C0%2C0%2C1%2C5%2C0%2C4.917%2C4.917%2C0%2C0%2C1%2C6.311.176Z%22%2F%3E%3Crect%20class%3D%22cls-2%22%20x%3D%223%22%20y%3D%224.5%22%20width%3D%224%22%20height%3D%221%22%2F%3E%3C%2Fsvg%3E");
                background-position: 0 0;
                background-repeat: no-repeat;
                display: inline-block;
                z-index: 1;
                margin-left: 0.5em;
            }

@media (max-width : 768px) {
    .profile {
        width: 90%;
    }
}



.narrow {
    /*max-width: 900px;*/
    margin: 0 auto;
}

.page-padding {
    padding: 4rem;
}

.welcome.page > .narrow > img {
    margin: 0 auto;
    display: block;
    width: 200px;
}

.welcome.page > .narrow > ul {
    width: 75%;
    justify-content: space-between;
    margin: 4rem auto;
}

    .welcome.page > .narrow > ul > li {
        background-color: inherit;
        margin: auto;
    }

        .welcome.page > .narrow > ul > li > a {
            font-size: 16px;
            height: 32px;
            border-bottom-color: rgb(98, 100, 167);
        }

.center {
    text-align: center;
}

pre {
    overflow-x: scroll;
}

pre,
div.error {
    background-color: #e5e5e5;
    padding: 1rem;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
    border-radius: 3px;
    margin: 1rem 0;
}

code {
    background-color: #e5e5e5;
    display: inline-block;
    padding: 0px 6px;
    border-radius: 3px;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
}

.error {
    color: red;
}


.profiles {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: unset;
    flex-basis: 0;
}