:root {
    /* Everflow Colour Pallete */
    --everflow-magenta: #ff0088;
    --everflow-green: #7fffd4;
    --everflow-blue: #00ffff;
    --everflow-black: #282828;
    --everflow-black-75: #282828;
    --everflow-grey: #909090;
    --everflow-grey-75: #acacac;
    --everflow-grey-50: #c7c7c7;
    --everflow-grey-25: #e3e3e3;
    --everflow-grey-13: #f1f1f1;
    --everflow-off-white: #f8f8f8;
    --everflow-success-green: #0a5f07;
    --everflow-attention-yellow: #ffcc33;
    --everflow-error-red: #e31d3d;
    --everflow-te-waterdrop: #000000;
    --everflow-water-waterdrop: #5de1f5;
    --everflow-waste-waterdrop: #e0ce24;
    --everflow-highways-waterdrop: #acacac;
    --everflow-surface-waterdrop: #de1e04;
    --everflow-default-active: #22687e;
    --everflow-default-unavailable: #90b3bf;
    --theme-bg-primary: var(--mud-palette-appbar-background);
    --theme-text-primary: var(--mud-palette-appbar-text);
    --mud-typography-button-text-transform: unset !important;
}

@property --hue-everflow-magenta {
    syntax: "<angle>";
    inherits: false;
    initial-value: 328deg;
}

.action-buttons {
    display: flex;
    justify-content: right;
}

.action-header {
    text-align: right;
}

.disabled {
    background-color: var(--everflow-grey-25) !important;
}

    .disabled td {
        color: var(--everflow-grey) !important;
    }

table th span.efsortlabel {
    display: flex;
}

table th.efth {
    background-color: var(--everflow-magenta) !important;
    color: var(--everflow-off-white) !important;
}

table th span.efsortlabel:hover {
    color: var(--everflow-off-white);
}

@keyframes spinner {
    to {
        transform: rotate(360deg);
    }
}

.spinner:before {
    content: '';
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    margin-left: -10px;
    border-radius: 50%;
    border: 2px solid #ccc;
    border-top-color: #000;
    animation: spinner .6s linear infinite;
}

/* MudBlazor/Evie Theme Fixes */

.mud-table-pagination .mud-input-control-input-container :not(:disabled) .mud-icon-root.mud-svg-icon {
    color: var(--everflow-black);
}

.mud-input-control > .mud-input-control-input-container > .mud-input-label-inputcontrol {
    color: var(--everflow-black);
}

.mud-layout {
    height: unset;
}

.with-helper .mud-input-helper-text, .day-colour .mud-day-label, .mud-picker-content .mud-day-label {
    color: black !important;
}

.mud-input-helper-text {
    color: var(--everflow-grey-50);
}

.text-right {
    text-align: right;
}

.mud-table-cell {
    padding: min(.5rem, 16px);
}

.tnum {
    font-feature-settings: "tnum";
}

.mud-table-body .mud-table-row:not(.disabled):hover {
    background: hsl(var(--hue-everflow-magenta) 100% 95%) !important;
}

.mud-table, .mud-data-grid {
    overflow: hidden;
}

.mud-table-head {
    background: var(--everflow-magenta);
    tr

{
    background: var(--everflow-magenta);
}

th {
    color: var(--everflow-off-white) !important;
}

.mud-icon-root.mud-svg-icon {
    fill: var(--everflow-off-white);
}

}

.thead-everflow-black .mud-table-head tr {
    background: var(--everflow-black);
}

.thead-everflow-black .mud-table-head th {
    color: var(--everflow-off-white) !important;
}

.mud-dialog .mud-dialog-actions {
    padding: 8px 24px;
}

.mud-drawer-header {
    background: var(--theme-bg-primary);
    color: var(--theme-text-primary);
    h1, h2, h3, h4, h5

{
    align-self: center;
}

* {
    color: var(--everflow-off-white);
}

}

th {
    text-align: left;
    color: var(--everflow-magenta);
}

.evie-paper {
    border-bottom: 2px solid var(--everflow-magenta);
}

.section {
    display: grid;
    grid-template-columns: calc(15% - .5rem) calc(85% - .5rem);
    gap: 1rem;
    border-radius: .5rem;
}

.td [aria-label="edit-time-restrictions"] {
    padding: 0;
    .svg
    {
        width: 20px;
        height: 20px;
    }
}

.section h3 {
    color: var(--everflow-magenta);
    font-weight: normal;
}

.pad-inputs .mud-input-control {
    margin-bottom: 1.5rem;
}

.section > * {
    flex-shrink: 0;
    flex-grow: 0;
}

.mud-input.mud-input-underline:before {
    border-bottom: 1px solid hsl(328deg 100% 80%);
}

.site {
    margin-bottom: .5rem;
}

.label {
    color: var(--everflow-magenta);
    font-weight: bold;
    margin-right: .5rem;
}

dt {
    color: var(--everflow-magenta);
    font-weight: bold;
}
}

.spid-popup {
    width: 75vw; /* 75% of viewport width */
    height: 75vh; /* 75% of viewport height */
    display: flex;
    justify-content: center;
    align-items: center;
}

.waterdrop-icon-te {
    color: var(--everflow-te-waterdrop);
    margin-bottom: -5px;
}
.waterdrop-icon-water {
    color: var(--everflow-water-waterdrop);
    margin-bottom: -5px;
}
.waterdrop-icon-waste {
    color: var(--everflow-waste-waterdrop);
    margin-bottom: -5px;
}
.waterdrop-icon-highways {
    color: var(--everflow-highways-waterdrop);
    margin-bottom: -5px;
}
.waterdrop-icon-surface {
    color: var(--everflow-surface-waterdrop);
    margin-bottom: -5px;
}

.spid-dialog {
    max-width: 1000px;
    min-width: 300px;
    min-height: 300px;
}

.loading-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
}
.scrollable-dialog-content {
    overflow-x: auto;
    max-width: 100%;
}

table.pricing-table {
    width: 100%;
    font-size: 0.82rem;
    color: black
}
table.pricing-table,
table.pricing-table td,
table.pricing-table th {
   border: 1px solid var(--everflow-magenta) !important;
   border-collapse: collapse;
}
    
table.pricing-table td,
table.pricing-table th {
     padding: 4px 6px 4px 4px; 
     line-height: 1.2; 
     vertical-align: middle;
 }
table.pricing-table tr.spid-row > td {
     padding-left: 3px !important;
     padding-right: 6px !important;
     font-size: 0.73rem;
}

.text-nowrap {
    white-space: nowrap;
}

.col-center-align {
    align-items: center;
}