:root {
    --hio-menu-top-height:                      var(--mud-appbar-height);
    --mud-palette-overlay-dark:                 rgba(33, 33, 33, 0.8) !important;
    --shadow: 3px 3px 10px oklch(from var(--mud-palette-appbar-background) .35 c h);
    --mud-default-borderradius:                 12px !important;
}

aside {
    position: fixed;
    right: 0;
    background: red;
    height: 100vh;
    width: 400px;
}

.btn-ok {
    background: linear-gradient(89.34deg,#08672E 0.45%,#07564E 99.43%);
    color: #F3E7C4 !important;
    font-weight: bold !important;
}

.btn-info {
    background:  linear-gradient(89.34deg,#0F3F71 0.45%,#07564E 99.43%);
    color: #F3E7C4 !important;
    font-weight: bold !important;
}


.shadowed {
    box-shadow: var(--shadow);
}

.box {
    position: relative;
    width: 400px;
    height: 100px;
    border: 2px solid var(--mud-palette-error);
    background: var(--mud-palette-dark-darken);
    color: var(--mud-palette-error);
    border-radius: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
.box::after{
    content: "";
    position: absolute;
    width: 500px;
    height: 150px;
    background-image: conic-gradient( transparent, transparent, transparent, var(--hiobs-body-color));
    animation: animate 1.5s linear infinite;
}
.box::before {
}
@keyframes animate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
.box span {
    position: absolute;
    inset: 3px;
    background: var(--hiobs-body-bg-color);
    z-index: 1;
}
.box h2 {
    position: relative;
    z-index: 2;
    color: var(--hiobs-body-color);
    font-size: 1.5em;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 4px;
}
@-webkit-keyframes rotate {
    to {
        transform: rotate(360deg);
    }
}
@keyframes rotate {
    to {
        transform: rotate(360deg);
    }
}

#blazor-error-ui {
    display:none;
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    justify-items: center;
    z-index: 9999999;
}

.blazor-error-ui-overlay {
    width: 100%;
    height: 100%;
    position: fixed;
    top:0;
    left:0;
}

.blazor-error-ui-conatiner {
    max-width: 90%;
    max-height: 90%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}

.blazor-error-panel {

}

.mud-dialog {
    border: 2px solid var(--mud-palette-lines-inputs);
}

.show { visibility: visible !important; }

#main {
    margin: 0 auto;
    overflow-y: scroll;

    display: flex;
    justify-content: center;

    color: #fff;

    position: relative;

    width: 100%;
    flex-direction: column;

}



.flex-column { flex-direction: column; }
.flex-column-reverse { flex-direction: column-reverse; }
.flex-row { flex-direction: row; }
.flex-row-reverse { flex-direction: row-reverse; }
.flex-grow { flex-grow: 1; }
.flex-wrap { flex-wrap: wrap; }
.align-items-start { align-items: start; }
.align-items-end { align-items: end; }
.align-items-center { align-items: center; }
.justify-content-start { justify-content: start; }
.justify-content-center { justify-content: center; }
.justify-content-end { justify-content: end; }

.d-none { display: none; }
.d-block { display: block; }
.d-inline { display: inline; }
.d-inline-block { display: inline-block; }
.d-flex { display: flex }
.d-inline-flex { display: inline-flex }

.fw-bolder { font-weight: bolder; }
.fw-bold { font-weight: bold; }

.text-end { text-align: right; }
.text-center { text-align: center; }
.text-decoration-underline { text-decoration: underline; }

.h-100 { height: 100%; }
.vh-100 { height: 100vh; }
.w-100 { width: 100%; }
.vw-100 { width: 100vw; }
.mh-100 { max-height: 100%; }
.mvh-100 { max-height: 100vh; }
.mw-100 { max-width: 100%; }
.mvw-100 { max-width: 100vw; }

.position-relative { position: relative; }
.position-absolute { position: absolute; }
.position-fixed { position: fixed; }
.position-static { position: static; }
.position-sticky { position: sticky; }

.top-0 { top: 0; } .top-50 { top: 50%; } .top-100 { top: 100%; }
.bottom-0 { bottom: 0; } .bottom-50 { bottom: 50%; } .bottom-100 { bottom: 100%; }
.start-0 { left: 0; } .start-50 { left: 50%; } .start-100 { left: 100%; }
.end-0 { right: 0; } .end-50 { right: 50%; } .end-100 { right: 100%; }

.rounded-0 { border-radius: 0; }
.rounded-1 { border-radius: .2em; }
.rounded-2 { border-radius: .4em; }
.rounded-3 { border-radius: .6em; }
.rounded-4 { border-radius: .8em; }
.rounded-5 { border-radius: 1em; }
.rounded-top-0 { border-top-left-radius: 0; border-top-right-radius: 0; }
.rounded-top-1 { border-top-left-radius: .2em; border-top-right-radius: .2em; }
.rounded-top-2 { border-top-left-radius: .4em; border-top-right-radius: .4em; }
.rounded-top-3 { border-top-left-radius: .6em; border-top-right-radius: .6em; }
.rounded-top-4 { border-top-left-radius: .8em; border-top-right-radius: .8em; }
.rounded-top-5 { border-top-left-radius: 1em; border-top-right-radius: 1em; }
.rounded-bottom-0 { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.rounded-bottom-1 { border-bottom-left-radius: .2em; border-bottom-right-radius: .2em; }
.rounded-bottom-2 { border-bottom-left-radius: .4em; border-bottom-right-radius: .4em; }
.rounded-bottom-3 { border-bottom-left-radius: .6em; border-bottom-right-radius: .6em; }
.rounded-bottom-4 { border-bottom-left-radius: .8em; border-bottom-right-radius: .8em; }
.rounded-bottom-5 { border-bottom-left-radius: 1em; border-bottom-right-radius: 1em; }
.rounded-start-0 { border-bottom-left-radius: 0; border-top-left-radius: 0; }
.rounded-start-1 { border-bottom-left-radius: .2em; border-top-left-radius: .2em; }
.rounded-start-2 { border-bottom-left-radius: .4em; border-top-left-radius: .4em; }
.rounded-start-3 { border-bottom-left-radius: .6em; border-top-left-radius: .6em; }
.rounded-start-4 { border-bottom-left-radius: .8em; border-top-left-radius: .8em; }
.rounded-start-5 { border-bottom-left-radius: 1em; border-top-left-radius: 1em; }
.rounded-end-0 { border-bottom-right-radius: 0; border-top-right-radius: 0; }
.rounded-end-1 { border-bottom-right-radius: .2em; border-top-right-radius: .2em; }
.rounded-end-2 { border-bottom-right-radius: .4em; border-top-right-radius: .4em; }
.rounded-end-3 { border-bottom-right-radius: .6em; border-top-right-radius: .6em; }
.rounded-end-4 { border-bottom-right-radius: .8em; border-top-right-radius: .8em; }
.rounded-end-5 { border-bottom-right-radius: 1em; border-top-right-radius: 1em; }
.rounded-circle { border-radius: 50% }
.rounded-top-circle { border-top-left-radius: 50%; border-top-right-radius: 50%; }
.rounded-bottom-circle { border-bottom-left-radius: 50%; border-bottom-right-radius: 50%; }
.rounded-start-circle { border-bottom-left-radius: 50%; border-top-left-radius: 50%; }
.rounded-end-circle { border-bottom-right-radius: 50%; border-top-right-radius: 50%; }
.rounded-pill { border-bottom-left-radius: 1000px; border-top-left-radius: 1000px; border-bottom-right-radius: 1000px; border-top-right-radius: 1000px; }

.cursor-pointer { cursor: pointer; }
.cursor-col-resize { cursor: col-resize; }
.cursor-row-resize { cursor: row-resize; }
.cursor-grab { cursor: grab; }
.cursor-grabbing { cursor: grabbing; }
.cursor-move { cursor: move; }

.overflow-hidden { overflow: hidden; }
.overflow-auto { overflow: auto; }
.overflow-visible { overflow: visible; }
.overflow-x-hidden { overflow-x: hidden; }
.overflow-x-auto { overflow-x: auto; }
.overflow-x-visible { overflow-x: visible; }
.overflow-y-hidden { overflow-y: hidden; }
.overflow-y-auto { overflow-y: auto; }
.overflow-y-visible { overflow-y: visible; }

@media (min-width: 0) {}

@media (min-width: 576px) {
    .d-sm-none { display: none; }
    .d-sm-block { display: block; }
    .d-sm-inline { display: inline; }
    .d-sm-inline-block { display: inline-block; }
    .d-sm-flex { display: flex }
    .d-sm-inline-flex { display: inline-flex }
}

@media (min-width: 768px) {
    .d-md-none { display: none; }
    .d-md-block { display: block; }
    .d-md-inline { display: inline; }
    .d-md-inline-block { display: inline-block; }
    .d-md-flex { display: flex }
    .d-md-inline-flex { display: inline-flex }
}

@media (min-width: 992px) {
    .d-lg-none { display: none; }
    .d-lg-block { display: block; }
    .d-lg-inline { display: inline; }
    .d-lg-inline-block { display: inline-block; }
    .d-lg-flex { display: flex }
    .d-lg-inline-flex { display: inline-flex }
}

@media (min-width: 1200px) {
    .d-xl-none { display: none; }
    .d-xl-block { display: block; }
    .d-xl-inline { display: inline; }
    .d-xl-inline-block { display: inline-block; }
    .d-xl-flex { display: flex }
    .d-xl-inline-flex { display: inline-flex }
}

@media (min-width: 1400px) {
    .d-xxl-none { display: none; }
    .d-xxl-block { display: block; }
    .d-xxl-inline { display: inline; }
    .d-xxl-inline-block { display: inline-block; }
    .d-xxl-flex { display: flex }
    .d-xxl-inline-flex { display: inline-flex }
}