:root {
    --bold-weight: 700;
    --highlight: #b3e5fc;
    --seperator: #e1e7ef;
}

body, html {
    height: 100%;
    margin: 0;
}

/*#region Blazor*/
#blazor-error-ui {
    background-color: var(--mud-palette-error);
    bottom: 0;
    display: none;
    padding: 16px;
    width: 100%;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        margin-top: 8px;
        text-decoration: none;
        top: 8px;
    }

    #blazor-error-ui .reload {
        cursor: pointer;
    }
/*#endregion*/

/*#region Breakpoints*/
.breakpoint-text::after {
    content: "X-Small (0-599px)";
}

@media (min-width: 600px) {
    .breakpoint-text::after {
        content: "Small (600-959px)";
    }
}

@media (min-width: 960px) {
    .breakpoint-text::after {
        content: "Medium (960-1279px)";
    }
}

@media (min-width: 1280px) {
    .breakpoint-text::after {
        content: "Large (1280-1919px)";
    }
}

@media (min-width: 1920px) {
    .breakpoint-text::after {
        content: "X-Large (1920-2559px)";
    }
}

@media (min-width: 2560px) {
    .breakpoint-text::after {
        content: "XX-Large (=> 2560px)";
    }
}
/*#endregion*/

/*#region DataGrid Columns*/
.colEllipsis {
    max-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.colSize50 {
    width: 50px;
}

.colSize100 {
    width: 100px;
}

.colSize125 {
    width: 125px;
}

.colSize150 {
    width: 150px;
}

.colSize175 {
    width: 175px;
}

.colSize200 {
    width: 200px;
}

.colSize300 {
    width: 300px;
}

.colSize400 {
    width: 400px;
}
/*#endregion*/

/*#region Fonts*/
.fontMedium {
    font-size: 1rem;
}

.fontLarge {
    font-size: 1.125rem;
}

.fw-bold {
    font-weight: var(--bold-weight);
}

.uppercase {
    text-transform: uppercase;
}
/*#endregion*/

/*#region General*/
.appBar {
    /*height: 75px;*/
}

    .appBar .contentBarAction, .appBar .contentBarClose {
        width: 175px;
    }

        .appBar .contentBarClose.mud-button-filled {
            background-color: var(--mud-palette-gray-lighter);
        }

            .appBar .contentBarClose.mud-button-filled:hover {
                background-color: var(--mud-palette-gray-light);
            }

    .appBar .mud-link {
        color: #ffffff !important;
        text-decoration: none !important;
        transition: color 0.5s ease-in-out, text-shadow 0.5s ease-in-out;
    }

        .appBar .mud-link:not(.mud-link-disabled):hover {
            color: var(--mud-palette-secondary) !important;
            text-shadow: 0 0 0 rgba(227, 197, 230, 0.9), 0.25px 0 rgba(227, 197, 230, 0.9), -0.25px 0 rgba(227, 197, 230, 0.9);
        }

.appIcon {
    --fa-secondary-color: var(--mud-palette-gray-default);
}

.appIcon-Large {
    font-size: 6rem;
}

.avatar-size-1 {
    width: 56px !important;
    height: 56px !important;
    font-size: 1.75rem !important;
}

.avatar-size-2 {
    width: 64px !important;
    height: 64px !important;
    font-size: 2rem !important;
}

.avatar-size-3 {
    width: 72px !important;
    height: 72px !important;
    font-size: 2.25rem !important;
}

.avatar-size-4 {
    width: 80px !important;
    height: 80px !important;
    font-size: 2.5rem !important;
}

.avatar-size-5 {
    width: 96px !important;
    height: 96px !important;
    font-size: 3rem !important;
}

.backgroundStriped {
    background: url('images/bgApp.jpg') center / cover no-repeat fixed;
}

.basicCard {
    background-color: var(--mud-palette-tertiary);
    border: 1px solid var(--mud-palette-lines-default);
}

.bgSecondaryLight {
    background-color: rgba(var(--mud-palette-secondary-rgb), .10);
}

.brandAccent {
    color: var(--mud-palette-secondary);
}

.brandingPanel {
    background: linear-gradient(rgba(0,0,0,.2), rgba(0,0,0,.35)), url('images/bgQueenslander.jpg') center / cover no-repeat;
}

    .brandingPanel .container {
        backdrop-filter: blur(6px);
        background: rgba(0, 0, 0, .25);
        border-radius: 4px;
        margin: 0 auto;
        padding: 2rem;
        text-align: center;
        width: 80%;
    }

    .brandingPanel .title {
        color: #ffffff;
        font-size: clamp(2.5rem, 5vw, 4.5rem);
        font-weight: 700;
        line-height: 1.1;
    }

    .brandingPanel .subtitle {
        color: rgba(255,255,255,.9);
        font-size: clamp(1.1rem, 2vw, 1.5rem);
    }

.gridButton {
    width: 175px;
}

.h-100 {
    min-height: 100vh;
}

.mudSiteLinks .mud-link {
    font-weight: 600;
}

.propertyValue h3 {
    font-size: 2.5rem;
}

.propertyValue h4 {
    font-size: 1.75rem;
}

.propertyValue .separator {
    background-color: var(--mud-palette-lines-default);
    flex: 1;
    height: 1px;
}

.propertyValue .yield {
    background-color: var(--mud-palette-success-hover);
}

.requiredIndicator {
    font-size: 0.875em;
    vertical-align: super;
}

.searchTextHighlight {
    background-color: var(--highlight) !important;
}

.sectionAlternate {
    background-color: #f8f8ff;
}

.sectionSeperator {
    border-bottom: 1px solid var(--seperator);
}

.stickyBottom {
    position: sticky;
    bottom: 0;
    z-index: 10;
}

.stickyTop {
    position: sticky;
    top: 0;
    z-index: 10;
}

.toggleCard {
    background-color: var(--mud-palette-tertiary);
    border: 1px solid var(--mud-palette-lines-default);
    cursor: pointer;
}

    .toggleCard:hover {
        border-color: var(--mud-palette-secondary);
    }

.toggleCardContainer {
    border: 1px solid transparent;
    border-radius: var(--mud-default-borderradius);
    padding: 0;
}

.toggleCardContainerError {
    border-color: var(--mud-palette-error);
    padding: 12px;
}

.toggleCardIconSelected {
    color: var(--mud-palette-secondary);
}

.toggleCardSelected {
    background-color: var(--mud-palette-secondary-hover);
    border-color: var(--mud-palette-secondary);
}

.w-100 {
    width: 100%;
}

@media (max-width: 959px) {
    .desktopButton {
        width: 100%;
    }
}

@media (min-width: 960px) {
    .textSpan25 {
        width: 25%;
    }

    .textSpan50 {
        width: 50%;
    }

    .textSpan75 {
        width: 75%;
    }
}

@media (min-width: 1280px) {
    .appBar .contentBarAction, .appBar .contentBarClose {
        width: 250px;
    }
}
/*#endregion*/

/*#region MudBlazor*/
.mud-expand-panel-header {
    transition: color .2s;
}

    .mud-expand-panel-header:hover .mud-typography {
        color: var(--mud-palette-secondary);
    }

.mud-breadcrumb-separator > span {
    color: #ffffff !important;
    opacity: .75 !important;
}

.mud-data-grid th, .mud-table th {
    font-weight: var(--bold-weight) !important;
}

.mud-dialog-title .mud-button-close {
    color: #ffffff;
}

.mud-icon-size-small {
    font-size: 1rem;
}

.mud-link {
    transition: color 0.5s ease-in-out;
}

    .mud-link:not(.mud-link-disabled):hover {
        color: var(--mud-palette-secondary) !important;
        text-decoration: none !important;
    }

.mud-scroll-to-top.visible {
    bottom: 24px;
    right: 24px;
}

.mud-snackbar {
    max-width: 912px;
    min-width: 0 !important;
    width: auto !important;
}

.mud-tab {
    min-width: 225px !important;
}

.mud-tab, .mud-button-label {
    text-transform: none;
}

.mud-tab-active {
    font-weight: var(--bold-weight) !important;
}

@media (max-width: 959px) {
    .mud-snackbar {
        display: none !important;
    }

    .mud-typography-h1 {
        font-size: 4rem;
    }

    .mud-typography-h2 {
        font-size: 2.5rem;
    }
}
/*#endregion*/