/** 
    TODO: Need to create an actual baseline style as this is messy and by
    instruction from MudBlazor documentation you should not override and 
    instead create your own theme 
*/

.mud-appbar {
    background-color: var(--mud-palette-white);
    color: var(--mud-palette-black)
}

.user-is-tabbing .mud-toolbar a:focus-visible {
    outline-color: #46433E;
    outline-offset: 5px;
    outline-style: solid;
    outline-width: 2px;
}

.mud-main-content {
    padding-bottom: calc(2.2 * var(--mud-appbar-height));
}

.mud-drawer-header {
    /* Override variable hieght */
    min-height: initial;
    padding: 12px;
    font-weight: bold;
}

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

.mud-link.mud-link-underline-hover {
    text-decoration: underline;
}

.mud-button-filled-primary .mud-typography-button {
    font-size: 25px;
    font-weight: 900;
}

.mud-button-text-primary.mud-button-text-size-medium .mud-typography-button {
    font-size: 16px;
}

button[type=submit]:focus-visible, button[type=button]:focus-visible {
    outline-color: #46433E;
    outline-offset: 5px;
    outline-style: solid;
    outline-width: 2px;
}

.mud-input-control > .mud-input-control-input-container > div.mud-input.mud-input-text {
    margin-top: 14px;
}

.mud-shrink ~ label.mud-input-label.mud-input-label-inputcontrol,
.mud-input:focus-within ~ label.mud-input-label.mud-input-label-inputcontrol {
    font-size: 14px !important;
    font-weight: 600 !important;
}

.mud-input-control > .mud-input-control-input-container > .mud-input-label-inputcontrol {
    font-size: 16px;
    font-weight: 300;
}


.mud-input-control .mud-input-control-input-container .mud-input-text + .mud-input-label {
    margin-left: 16px;
    margin-right: 16px;
}

.mud-input-control .mud-input-control-input-container .mud-input-text .mud-input-slot {
    padding-left: 16px;
    padding-right: 16px;
}

.mud-input-control .mud-input-control-input-container .mud-input-text .mud-input-adorned-start .mud-input-slot {
    padding-left: 0;
    padding-right: 16px;
}

.mud-input-control .mud-input-control-input-container .mud-input-text .mud-input-adorned-end .mud-input-slot {
    padding-left: 16px;
    padding-right: 0;
}

.mud-input-control .mud-input-control-input-container .mud-input-text .mud-input-adorned-start .mud-input-adornment {
    margin-left: 16px;
}

.mud-input-control .mud-input-control-input-container .mud-input-text .mud-input-adorned-end .mud-input-adornment {
    margin-right: 16px;
}


.mud-input-control .mud-input-control-helper-container {
    padding-left: 16px;
    padding-right: 16px;
}


.mud-dialog .mud-dialog-content {
    min-height: 64px;
}

/* ********************************************************
    Mud Input Focus (Themed)
*/
.mud-input:focus-within ~ label.mud-input-label.mud-input-label-inputcontrol {
    color: var(--mud-palette-secondary);
}

.mud-input.mud-input-underline:after {
    border-bottom-color: var(--mud-palette-secondary);
}

.mud-input.mud-input-underline.mud-input-error:after {
    border-bottom-color: var(--mud-palette-error);
}
.mud-input-error input {
    background-image: url('data:image/svg+xml;utf8,<svg fill="%23E10000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/></svg>') !important;
    background-repeat: no-repeat !important;
    background-position: right 8px center !important;
    background-size: 24px 24px;
    padding-right: 40px;
}

.user-is-tabbing .mud-select-focus-visible:focus-within {
    outline: 2px solid #46433E;
    outline-offset: 1px; /* Space between the outline and the element */
}
    
/* ********************************************************
    Mud-Grid Extensions
    * Support cell offset similar to Bootstrap Grid
*/
/* Mudblazor XS media query*/
@media (max-width: 600px) {
    .mud-grid-item.mud-grid-item-offset-xs-1 {
        margin-left: 8.33333333%;
    }

    .mud-grid-item.mud-grid-item-offset-xs-2 {
        margin-left: 16.66666667%;
    }

    .mud-grid-item.mud-grid-item-offset-xs-3 {
        margin-left: 25%;
    }

    .mud-grid-item.mud-grid-item-offset-xs-4 {
        margin-left: 33.33333333%;
    }

    .mud-grid-item.mud-grid-item-offset-xs-5 {
        margin-left: 41.66666667%;
    }

    .mud-grid-item.mud-grid-item-offset-xs-6 {
        margin-left: 50%;
    }

    .mud-grid-item.mud-grid-item-offset-xs-7 {
        margin-left: 58.33333333%;
    }

    .mud-grid-item.mud-grid-item-offset-xs-8 {
        margin-left: 66.66666667%;
    }

    .mud-grid-item.mud-grid-item-offset-xs-9 {
        margin-left: 75%;
    }

    .mud-grid-item.mud-grid-item-offset-xs-10 {
        margin-left: 83.33333333%;
    }

    .mud-grid-item.mud-grid-item-offset-xs-11 {
        margin-left: 91.66666667%;
    }

}
/* Mudblazor SM media query*/
@media (min-width: 600px) {
    .mud-grid-item.mud-grid-item-offset-sm-1 {
        margin-left: 8.33333333%;
    }

    .mud-grid-item.mud-grid-item-offset-sm-2 {
        margin-left: 16.66666667%;
    }

    .mud-grid-item.mud-grid-item-offset-sm-3 {
        margin-left: 25%;
    }

    .mud-grid-item.mud-grid-item-offset-sm-4 {
        margin-left: 33.33333333%;
    }

    .mud-grid-item.mud-grid-item-offset-sm-5 {
        margin-left: 41.66666667%;
    }

    .mud-grid-item.mud-grid-item-offset-sm-6 {
        margin-left: 50%;
    }

    .mud-grid-item.mud-grid-item-offset-sm-7 {
        margin-left: 58.33333333%;
    }

    .mud-grid-item.mud-grid-item-offset-sm-8 {
        margin-left: 66.66666667%;
    }

    .mud-grid-item.mud-grid-item-offset-sm-9 {
        margin-left: 75%;
    }

    .mud-grid-item.mud-grid-item-offset-sm-10 {
        margin-left: 83.33333333%;
    }

    .mud-grid-item.mud-grid-item-offset-sm-11 {
        margin-left: 91.66666667%;
    }
}
/* Mudblazor md media query*/
@media (min-width: 960px) {
    .mud-main-content {
        padding-bottom: var(--mud-appbar-height);
    }

    .border-md-l {
        border-left-width: 1px !important;
    }
    .mud-grid-item.mud-grid-item-offset-md-1 {
        margin-left: 8.33333333%;
    }
    .mud-grid-item.mud-grid-item-offset-md-2 {
        margin-left: 16.66666667%;
    }
    .mud-grid-item.mud-grid-item-offset-md-3 {
        margin-left: 25%;
    }
    .mud-grid-item.mud-grid-item-offset-md-4 {
        margin-left: 33.33333333%;
    }
    .mud-grid-item.mud-grid-item-offset-md-5 {
        margin-left: 41.66666667%;
    }
    .mud-grid-item.mud-grid-item-offset-md-6 {
        margin-left: 50%;
    }
    .mud-grid-item.mud-grid-item-offset-md-7 {
        margin-left: 58.33333333%;
    }
    .mud-grid-item.mud-grid-item-offset-md-8 {
        margin-left: 66.66666667%;
    }
    .mud-grid-item.mud-grid-item-offset-md-9 {
        margin-left: 75%;
    }
    .mud-grid-item.mud-grid-item-offset-md-10 {
        margin-left: 83.33333333%;
    }
    .mud-grid-item.mud-grid-item-offset-md-11 {
        margin-left: 91.66666667%;
    }
}