html {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}

body {
    /*background-image: url(/bg1.jpg);*/
    /*background-position: 0 0;
    background-repeat: no-repeat;
    -moz-background-size: 100% auto;
    -o-background-size: 100% auto;
    background-size: 100% auto;*/
    /*padding-bottom: 40px;*/
    /*color: #5a5a5a;*/
    margin: 0;
    padding: 0;
    height: 100%;
    display: flex;
    width: 100%;
}

.mud-layout {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}

*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.content {
}

.content-horizontal {
    padding-top: calc(36px + 12px); /* Horizontal menu height + pt-3 */
}

.appbar-logo {
    width: auto;
    height: 25px;
}

footer {

}

footer > p {
    margin: 0 !important;
    font-size: 0.85rem !important;
}

#copy {
/*    font-size: 1.1rem;
    line-height: 1.2;*/
    padding-right: 3px;
}

.wof-horizontal-menu {
    width: 100%;
    position: fixed;
    z-index: var(--mud-zindex-appbar);
    /*background-color: var(--mud-palette-drawer-background);*/
    /*color: var(--mud-palette-drawer-text);*/
}

.wof-avatar-big {
    width: 4rem;
    height: 4rem;
}

.mud-navmenu.horizontal {
    width: 100%;
}

    .mud-navmenu.horizontal > .mud-nav-item {
        margin-right: 1rem;
    }

        .mud-navmenu.horizontal > .mud-nav-item:last-child {
            margin-right: 0;
        }

    .mud-navmenu.horizontal > .mud-nav-item > .mud-nav-link {
        padding: 2px 14px;
        margin-top: 2px;
        margin-bottom: 2px;
    }

    .mud-navmenu.horizontal > .mud-nav-item > .mud-nav-link > .mud-nav-link-text {
        margin-left: 0;
        margin-inline-start: 0;
    }

.wof-row {
    margin-bottom: 20px;
}

.h-100 {
    height: 100% !important;
}

.w-100 {
    width: 100% !important;
}

.text-center {
    text-align: center !important;
}

.text-left {
    text-align: left !important;
}

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

.text-muted {
    color: var(--mud-palette-text-disabled) !important;
}

.no-wrap {
    white-space: nowrap;
}

.hide-overflow {
    overflow: hidden;
}

.pointer {
    cursor: pointer;
}

.wof-ellipsis {
    text-overflow: ellipsis;
    overflow-x: hidden;
    white-space: nowrap;
}

.wof-service-card {
    width: 100%;
    height: 100px;
    background: rgb(255,255,255);
    /*background: radial-gradient(circle, rgba(255,255,255,1) 80%, var(--mud-palette-secondary-lighten) 100%);*/
}

.wof-service-card.treatment {
    width: 100%;
    height: 230px !important;
    background: rgb(255,255,255);
    /*background: radial-gradient(circle, rgba(255,255,255,1) 80%, var(--mud-palette-secondary-lighten) 100%);*/
}

    .wof-service-card > .mud-card-content > .description {
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .wof-service-card:hover, .wof-service-card:focus, .wof-service-card:active, .wof-service-card.selected {
        background: radial-gradient(circle, rgba(255,255,255,1) 50%, var(--mud-palette-primary-lighten) 100%);
        border-color: var(--mud-palette-primary);
        transition: box-shadow 300ms cubic-bezier(.4,0,.2,1) 0ms;
    }

    .wof-service-card img {
        width: auto;
        max-width: 150px;
        height: 60px;
        align-self: center;
    }

.wof-bordered-box {
    display: inline-block;
    border: 1px solid var(--mud-palette-lines-default);
    color: var(--mud-palette-text-primary);
    border-radius: var(--mud-default-borderradius);
    transition: box-shadow 300ms cubic-bezier(.4,0,.2,1) 0ms;
}

hr.wof-service-card-break-row {
    flex-basis: 100%;
    height: 0;
    margin: 0;
    border: 0;
}

hr.wof-spacer {
    height: 0;
    border: 0;
    border-top: 1px solid var(--mud-palette-lines-default);
    width: 100%;
}

.wof-infobox {
    border: 1px solid var(--mud-palette-lines-default);
    padding: 16px !important;
    color: var(--mud-palette-text-primary);
    background-color: var(--mud-palette-primary-lighten);
    border-radius: var(--mud-default-borderradius);
    transition: box-shadow 300ms cubic-bezier(.4,0,.2,1) 0ms;
    margin: 15px 0;
}

.wof-text-small {
    font-size: 0.85rem;
}

.wof-text-tiny {
    font-size: 0.7rem;
}

.mud-navmenu > .wof-navmenu-section {
    margin-left: 0.5rem;
    margin-bottom: 20px;
    padding-left: 0.5rem;
}

    .mud-navmenu > .wof-navmenu-section > .wof-navmenu-section-label {
        font-size: 0.8rem;
        opacity: 0.5;
        margin-bottom: 6px;
    }

.wof-navmenu-header {
    border-bottom: 1px solid var(--mud-palette-drawer-text);
}

.wof-navmenu-footer {
    color: var(--mud-palette-white);
}

    /* Active this when the element should be clickable */
    .wof-navmenu-footer:hover {
        background-color: var(--mud-palette-action-default-hover);
        cursor: pointer;
    }

    .wof-navmenu-header .wof-navmenu-header-label,
    .wof-navmenu-footer .wof-navmenu-label {
        display: block;
        position: relative;
        top: 0.2rem;
        left: 0;
        font-size: 0.7rem;
        opacity: 0.5;
    }

    .wof-navmenu-footer .wof-navmenu-body {
        display: block;
        font-size: 0.85rem;
        margin-bottom: 2px;
    }

    .wof-navmenu-footer .wof-navmenu-decoration {
        display: block;
        position: relative;
        top: -0.2rem;
        left: 0;
        font-size: 0.7rem;
        opacity: 0.55;
        font-weight: normal;
        margin-left: 1rem;
        line-height: 1.1;
    }

        .wof-navmenu-footer .wof-navmenu-decoration > .wof-navmenu-decoration-label {
            font-size: 0.6rem;
            opacity: 0.4;
            margin-right: 2px;
            margin-left: -1rem;
        }

.header-border {
    border-bottom: 1px solid var(--mud-palette-lines-default);
    width: 250px;
    display: inline-block;
    vertical-align: middle;
}

.powerbi-wrapper {
    max-height: 800px;
    max-width: 2000px;
    height: 100%;
    width: 100%;
    min-height: 100%;
}

/* XS */
@media screen and (max-width: 600px) {
    .wof-avatar-big {
        width: 3rem;
        height: 3rem;
    }
}

/* SM */
@media screen and (max-width: 960px) and (min-width: 600px) {
}

/* MD */
@media screen and (max-width: 1280px) and (min-width: 960px) {
}

/* LG */
@media screen and (max-width: 1920px) and (min-width: 1280px) {
}

/* XL */
@media screen and (max-width: 2560px) and (min-width: 1920px) {
}

/* XXL */
@media screen and (min-width: 2560px) {
}