@import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');


html {
    height: 100vh;
    width: 100vw;
    overflow: hidden;
}

body {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}

/* Polly apps use non-caps style for menu items (default mudblazor is all caps)*/
div.mud-menu>button {
    text-transform: unset;
}

.at-navbar-link .mud-nav-link:not(.mud-nav-link-disabled) .mud-nav-link-icon {
    color: currentColor !important;
}

/*
 * Apply the full-height class to mud tables that are contained in flex-box columns 
 * configured to fill the page.
 */
.mud-table.full-height {
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.mud-table.full-height>.mud-table-container {
    height: 100%;
}

.mud-table.full-height>.mud-table-pagination {
    overflow: visible;
}

.mud-table.full-height thead.mud-table-head {
    position: sticky;
    top: 0;
    z-index: 5;
}

/* Apply the shrink-to-fit class to mud stacks (which get the flex-column class)
 * if you want the target element to be able to shrink to anything less than the sum of
 * computed heights of its contents. This is useful when using a flex box to fill a page.
 */
.flex-column.shrink-to-fit {
    min-height: 0;
}

tr .row-hover-icon {
    visibility: hidden !important;
}

tr:hover .row-hover-icon {
    visibility: visible !important;
}

.at-button-round {
    border-radius: 25px
}

/* Input labels on login component should match the backing surface */
.login-container .mud-input-label {
    background-color: var(--mud-palette-surface);
}

/* Mudblazor sets this to inherit from parent in the DOM, which for alerts is too faded*/
/* The color it inherits by MudBlazor default styling is `var(--mud-palette-warning)`*/
.mud-alert-text-warning .mud-alert-icon svg {
    fill: var(--mud-palette-warning-darken);
}

.at-login-container {
    padding: 48px 100px;
}

/* Set background color to surface color */
/* MudBlazor doesn't give us an easy way to do this */
.at-bg-surface {
    background-color: var(--mud-palette-surface);
}

.at-bg-surface .mud-input-label {
    background-color: var(--mud-palette-surface);
}

.at-bg-mudbg {
    background-color: var(--mud-palette-background);
}

.at-bg-mudbg .mud-input-label {
    background-color: var(--mud-palette-background);
}

.at-border-rounded {
    border-radius: var(--mud-default-borderradius);
    overflow: hidden;
}

.at-page-container {
    width: 60vw;
    margin: auto;
}

.at-flex-basis-15 {
    flex-basis: 15%;
}

.at-flex-basis-20 {
    flex-basis: 20%;
}

.at-flex-basis-25 {
    flex-basis: 25%;
}

.at-flex-basis-30 {
    flex-basis: 30%;
}

.at-flex-basis-35 {
    flex-basis: 35%;
}

.at-flex-basis-40 {
    flex-basis: 40%;
}

.at-flex-basis-45 {
    flex-basis: 45%;
}

/* Mobile Screens */
@media (max-width: 767px) {

    /* Reduce horizontal padding */
    .at-login-container {
        padding: 48px 35px;
    }

    /* Reduce h1 line height */
    .mud-typography-h1 {
        line-height: 1.25;
    }

    /* Body2 typography is smaller. Reduces font size
    on text below divider line on login/password screens */
    .at-login-container .mud-typography-body2 {
        font-size: var(--mud-typography-caption-size);
    }

    .at-login-container .mud-alert-message {
        font-size: var(--mud-typography-caption-size);
    }

    /* Hide button text on support buttons. Showing text
    makes buttons look broken because of whitespace breaks */
    .at-polly-support-buttons .mud-typography-button {
        display: none;
    }

    /* MudBlazor puts margin to the right of the icons in buttons.
    Get rid of it because we're hiding the text */
    .at-polly-support-buttons .mud-button-icon-start {
        margin-right: 0;
    }

    /* Make the button icons a little bigger as we are
    not showing text */
    .at-polly-support-buttons .mud-button-icon-size-medium>*:first-child {
        font-size: 30px;
    }
}