.validation-message {
    color: var(--mud-palette-error);
}

.mud-table-hover .mud-table-row.clickable:hover {
    cursor: pointer !important;
}

.mud-table-row.selected,
.mud-table-cell.selected,
.mud-grid.selected,
.mud-table-hover .mud-table-row.clickable:hover,
.mud-grid.clickable:hover {
    cursor: pointer !important;
    background: var(--mud-palette-table-hover) !important;
}

pre {
    white-space: pre-wrap;
    word-wrap: break-word;
    font-family: var(--mud-typography-default-family);
    font-size: var(--mud-typography-default-size);
    line-height: var(--mud-typography-default-lineheight);
    letter-spacing: var(--mud-typography-default-letterspacing);
    font-weight: var(--mud-typography-default-weight);
}

/*  On the index.html if it errors before it finishing loading, the sass doesn't compile and the error remains transparent and difficult to see
    This will mean that it will be red at that point. Then once sass is done, it will ensure that it uses the palette colours instead. - Shelley Strik - Nov 8, 2023 */
#blazor-error-ui {
    background: var(--mud-palette-error, #D50000);
}

/*
-------------------Application Loading Progress Indicator start----------------------
This is an element that shows while the app is downloading needed resources, the NortechProgressCircular also utilizes these
styles so that we didn't have to duplciate the styles.
*/

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(50% - .5em) 0 auto 1.2rem;
    color: white;
    font-family: var(--mud-typography-default-family, 'Roboto','Helvetica','Arial','sans-serif');
}

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

.loading-progress-container {
    height: 165px;
    width: 165px;
    position: relative;
    margin: 0 auto;
    top: calc(20vh + 3.25rem)
}

.loading-progress-outside-arc {
    border: 19px solid black;
    border-bottom: none;
    border-left: none;
    width: calc(100% - 2px);
    height: calc(100% - 2px);
    position: absolute;
    top: 1px;
    left: 1px;
    z-index: 2000;
    background-color: transparent;
    border-radius: 100%;
    transform: rotateZ(-120deg);
    -webkit-animation: spin 4s linear infinite;
    animation: spin 4s linear infinite;
}

.loading-progress-inside-arc {
    border: 15px solid rgb(205,16,30);
    border-bottom: none;
    border-left: none;
    width: calc(100% * 0.79754);
    height: calc(100% * 0.79754);
    position: absolute;
    top: calc(100% * 0.09815);
    left: calc(100% * 0.19361);
    z-index: 1999;
    background-color: transparent;
    border-radius: 100%;
    transform: rotateZ(-120deg);
    -webkit-animation: spinReverse 4s linear infinite;
    animation: spinReverse 4s linear infinite;
}

.mud-progress-small .loading-progress-outside-arc {
    border: 3px solid black;
    border-bottom: none;
    border-left: none;
}

.mud-progress-small .loading-progress-inside-arc {
    border: 2px solid rgb(205,16,30);
    border-bottom: none;
    border-left: none;
}

.mud-progress-medium .loading-progress-outside-arc {
    border: 4px solid black;
    border-bottom: none;
    border-left: none;
}

.mud-progress-medium .loading-progress-inside-arc {
    border: 3px solid rgb(205,16,30);
    border-bottom: none;
    border-left: none;
}

.mud-progress-large .loading-progress-outside-arc {
    border: 6px solid black;
    border-bottom: none;
    border-left: none;
}

.mud-progress-large .loading-progress-inside-arc {
    border: 4px solid rgb(205,16,30);
    border-bottom: none;
    border-left: none;
}

@-webkit-keyframes spin {
    from {
        transform: rotateZ(-120deg) scale(1);
    }

    50% {
        transform: rotateZ(240deg) scale(1);
    }

    to {
        transform: rotateZ(600deg) scale(1);
    }
}

@keyframes spin {
    from {
        transform: rotateZ(-120deg) scale(1);
    }

    50% {
        transform: rotateZ(240deg) scale(1);
    }

    to {
        transform: rotateZ(600deg) scale(1);
    }
}

@-webkit-keyframes spinReverse {
    from {
        transform: rotateZ(-120deg) scale(1);
    }
    50% {
        transform: rotateZ(-480deg) scale(1);
    }
    to {
        transform: rotateZ(-840deg) scale(1);
    }
}

@keyframes spinReverse {
    from {
        transform: rotateZ(-120deg) scale(1);
    }
    50% {
        transform: rotateZ(-480deg) scale(1);
    }
    to {
        transform: rotateZ(-840deg) scale(1);
    }
}

/*
-------------------Application Loading Progress Indicator end----------------------
*/

/*
This will add vertical scroll
 */
.scroll-y{
    overflow-y: scroll;
    overflow-x: hidden;
}

/*
This will add vertical scroll and max height for modals
 */
.modal-content-max-y{
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 65vh
}