html,
body {
    height: 100%;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    box-sizing: border-box;
    -webkit-text-size-adjust: 100%;
}

/* APpbar */
.mud-appbar {
    box-shadow: 20px 0px 20px rgba(47, 143, 232, 0.07);
}

/* Drawer */
.mud-drawer {
    box-shadow: 4px 0px 20px rgba(47, 143, 232, 0.07);
}

/* Flex a columna en pantallas pequeñas. Esta regla debería estar en MudBlazor pero no lo estça en esta version */
@media (max-width: 960px) {
    .flex-sm-column {
        flex-direction: column;
    }
}

@media (max-width: 600px) {
    .flex-xs-column {
        flex-direction: column;
    }
}

strong, b {
    font-weight: 600 !important;
}

/* Text alignment */
.left {
    text-align: left !important;
}

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

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

/* Sombras en Papel y WIdgets */
.mud-paper-outlined {
    box-shadow: 0 0 20px 3px rgba(0,0,0,.05);
    border: none;
}

.app-paper {
    border-radius: 10px;
    padding: 24px;
    transition: box-shadow 300ms cubic-bezier(.4,0,.2,1) 0ms;
}

.mud-expand-panel {
    box-shadow: 0 0 20px 3px rgba(0,0,0,.05);
}

/*.mud-popover-open {
    padding: 0 !important;
}*/

.headerDivider {
    border: 0.01em solid #dfdfdfab;
    height: 48px;
    position: relative;
}

.blur {
    backdrop-filter: blur(10px);
}

@media (min-width: 960px) {
    .mud-grid-item-md-intermediate-lg-4 {
        flex-grow: 0;
        max-width: calc(100% / 12 * 4);
        flex-basis: calc(100% / 12 * 4);
    }
}