:root {
    --wtw-toprow-background: #131A49;
    --wtw-toprow-foreground: #fff;
    --wtw-toprow-bordertop: #131A49;
    --wtw-navbar-brand-backcolor: transparent;
    --wtw-footer-background: #131A49;
    --wtw-footer-foreground: #fff;
    --wtw-menu-background: #131A49;
    --wtw-menuitem-foreground: #d7d7d7;
    --wtw-menuitem-background-active: rgba(255,255,255,0.25);
    --wtw-menuitem-foreground-active: #fff;
    --wtw-menuitem-background-hover: rgba(255,255,255,0.1);
    --wtw-menuitem-foreground-hover: #fff;
    --wtw-menubtn-background: #444;
    --wtw-menubtn-foreground: #fff;
    --wtw-menubtn-background-hover: #3B396F;
    --wtw-menubtn-foreground-hover: #fff;
    --wtw-errorrefresh-background: lightyellow;
    --wtw-errorrefresh-foreground: white;
    --wtw-errorrefresh-shadow: rgba(0, 0, 0, 0.2);
    --bs-link-color: #6832E2;
    --bs-link-hover-color: #985CF6;
}

.navbar {
    --bs-navbar-brand-color: #fff;
}

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

h1:focus {
    outline: none;
}

a {
    color: var(--bs-link-color);
}

a:hover {
    color: var(--bs-link-hover-color)
}

.mud-button {
    border-bottom-width: 2px;
}

.mud-link {
    color: var(--bs-link-color) !important;
}

.mud-link:hover {
    color: var(--bs-link-hover-color) !important;
}

.content {
    padding-top: 1.1rem;
    flex-grow: 1;
}

.top-row {
    height: 3.7rem;
    background-color: var(--wtw-toprow-background);
    color: var(--wtw-toprow-foreground);
    border-top: 0.2rem solid var(--wtw-toprow-bordertop);
    padding: 0;
}

.upload-error {
    color: var(--mud-palette-error) !important;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

@media (max-width: 600px) {
    .package-grid td {
        justify-content: normal !important;
    }
    .package-grid td::before {
        width: 130px !important;
    }
    .package-grid td.mud-table-child-content {
        display: table-cell !important;
    }
    .package-grid td.mud-table-child-content::before {
        display: none;
    }
}

.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem auto;
}

.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;
}

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

.loading-progress-text:after {
    content: var(--blazor-load-percentage-text, "Loading");
}

code {
    color: #c02d76;
}