.donut-container.interactive g.arc
{
    cursor: pointer
}

.blazor-load-progress {
    background: silver;
    width: 50vw;
    margin: 20% auto;
    height: 1rem;
    border-radius: 10rem;
    overflow: hidden;
    position: relative;
}

.blazor-load-progress:after {
    content: '';
    position: absolute;
    inset: 0;
    background: blue;
    scale: var(--blazor-load-percentage, 0%) 100%;
    transform-origin: left top;
    transition: scale ease-out 0.5s;
}

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

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

.grid-container, .grid-holdingarea {
    display: grid;
    grid-template-columns: repeat(6, 1fr); /* 6 equal-width columns */
    gap: 1rem; /* Space between grid items */
    min-height: 100px;
}

.sortable-chosen .card {
    background-color: var(--ct-gray);
}
.sortable-chosen .card .widget-handle {
    color: var(--ct-gray-dark);
}

.grid-holdingarea {
    grid-template-columns: 1fr; /* 1 column */
}

.btn-check:checked + .btn {
    background-color: color-mix(in hsl, var(--ct-btn-bg), black 20%);
}

.widget-handle:hover {
    cursor: move;
}

.grid-container > .widget-card > .card {
    height : 100%;
}

[widget-hidden] {
    background-image: linear-gradient(45deg, var(--ct-card-bg) 25%, var(--ct-light) 25%, var(--ct-light) 50%, var(--ct-card-bg) 50%, var(--ct-card-bg) 75%, var(--ct-light) 75%, var(--ct-light) 100%);
    background-size: 2.83px 2.83px;
}
[widget-hidden] h4 {
    background-color: var(--ct-card-bg);
}

#Index-Asset_Map.widget-height-tall #map {
    min-height: 700px;
}

#Index-Asset_Map.widget-height-medium #map {
    min-height: 500px;
}

#Index-Asset_Map.widget-height-short #map {
    min-height: 300px;
}

.map-container {
    height : calc(100% - 50px);

}

.map-container .map {
    height : 100%;
}

.widget-height-tall .table-responsive,
.widget-height-medium .table-responsive,
.widget-height-short .table-responsive {
    overflow-y: auto;
}

.widget-height-tall .table-responsive {
    max-height: 700px;
}

.widget-height-medium .table-responsive {
    max-height: 500px;
}

.widget-height-short .table-responsive {
    max-height: 300px;
}

.height-btn-short, .height-btn-medium, .height-btn-tall {
    vertical-align: top;
    /* WCAG 2.5.5 (AA) 24x24 unique target area */
    margin: 3px; /* (3*2) + 18px */
}
.height-btn-short {
    height: clamp(18px, 1.5em, 44px);
}
.height-btn-medium {
    height: clamp(18px, 2em, 44px);
}
.height-btn-tall {
    height: clamp(18px, 3em, 44px);
}
.width-btn-tiny,
.width-btn-small,
.width-btn-half,
.width-btn-large,
.width-btn-full {
    /* WCAG 2.5.5 (AA) 24x24 unique target area */
    margin: 3px; /* (3*2) + 18px */

}
.width-btn-tiny {
    width: clamp(18px, 1.1em, 44px);
}
.width-btn-small {
    width: clamp(18px, 1.25em, 44px);
}
.width-btn-half {
    width: clamp(18px, 1.5em, 44px);
}
.width-btn-large {
    width: clamp(18px, 2em, 44px);
}
.width-btn-full {
    width: clamp(18px, 3em, 44px);
}

.widget-height-tall .table-responsive,
.widget-height-medium .table-responsive,
.widget-height-short .table-responsive thead {
    position: sticky;
    top: 0;
}

.grid-item {
    padding: 0.5rem;
    background-color: #f9f9f9;
}

.line-through {
    text-decoration: line-through;
}

.underline-on-hover:hover {
    text-decoration: underline;
}

.focus-visible:focus-visible {
    outline: 1px solid !important;
}

/* Underline instead of border for focus for components where border does not work */
.focus-visible-underline:focus-visible {
    text-decoration: underline;
}

@media (max-width: 575px) {
    .add-asset-form .input-group * {
        width: 100%;
    }
}

@media (max-width: 850px) {
    .grid-container, .grid-holdingarea * {
        display: block;
    }
}
/* added flex helper utilities */
.flex-grow-auto {
    flex: 1 0 auto;
}
.flex-shrink-auto {
    flex: 0 1 auto;
}
.flex-item-80 {
    flex: 0 1 80px;
}
.flex-item-140 {
    flex: 0 1 140px;
}
.flex-item-160 {
    flex: 0 1 160px;
}
.flex-item-280 {
    flex: 0 1 280px;
}