body {
    height: 100vh;
}

:root {
    --mud-palette-primary: #3592b4 !important;
    --containerBackGround: #f3f3f3 !important;
    --tableThead: lightskyblue;
}


.Page-container {
    display: flex;
    position: relative;
    flex-direction: column;
    height: 100%;
}

.uppercase * input, input {
    text-transform: uppercase;
}
.Container-item {
    margin-top: 15px;
    display: flex;
    flex-direction: column;
    transition: box-shadow 300ms cubic-bezier(.4,0,.2,1) 0ms;
    box-shadow: var(--mud-elevation-1);
    background-color: var(--containerBackGround);
}

    .Container-item > .container-head {
        padding-inline: 10px;
        background-color: #3592b4;
        color: white;
        font-weight: 700;
    }

        .Container-item > .container-head span {
            margin-bottom: auto;
            margin-top: auto;
        }

    .Container-item > .container-content {
        padding: 10px;
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        background-color: var(--grey-08);
    }

    .Container-item * .container-content {
        padding: 10px;
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        background-color: var(--grey-08);
    }

    .Container-item > .container-content.column {
        flex-direction: column;
    }


.container-head span {
    padding-left: 15px;
}

.container-head h4 {
    padding-left: 25px
}

.Container-table {
    margin-top: 15px !important;
    background-color: var(--containerBackGround);
    transition: box-shadow 300ms cubic-bezier(.4,0,.2,1) 0ms;
    box-shadow: var(--mud-elevation-1);
}


.Tabs {
}

    .Tabs * .mud-tabs-toolbar .mud-tabs-toolbar-inner {
        min-height: 32px;
    }

    .Tabs * .mud-tab {
        padding: 5px 6px;
        min-height: 36px;
    }
/*TOOLBAR*/
.ToolBar-container {
    color: var(--mud-palette-text-primary);
    border-radius: var(--mud-default-borderradius);
    transition: box-shadow 300ms cubic-bezier(.4,0,.2,1) 0ms;
    box-shadow: var(--mud-elevation-25);
    position: sticky;
    top: 0px;
    z-index: 999;
}

.mud-toolbar.ToolBar {
    height: 36px;
}

.ToolBar-new {
    background-color: #fbfbfb;
}

.ToolBar-mapping {
    background-color: #ff980040;
}

.ToolBar-pending {
    background-color: #ff980040;
}

.ToolBar-active {
    background-color: #ff980020;
}

.ToolBar-confirmed {
    background-color: #a6ebc3;
}

.ToolBar-printed {
    background-color: #02cb5545;
}

.ToolBar-cancelled {
    background-color: #FFCDD2;
}

.mud-icon-button.ToolBar-IconButton {
    padding: 2px;
}

.ToolBar-IconButton .mud-icon-size-medium {
    font-size: 1.4rem;
}

    .ToolBar-IconButton .mud-icon-size-medium:hover {
        font-size: 1.5rem;
    }

.ToolBar-iconbutton {
    width: 1.5rem;
    margin-inline: 2px;
}

.ToolBar .MenuIconBtn {
}

.ToolBar-Title > span {
    text-transform: uppercase;
    font-weight: 700;
}

@media (min-width: 600px) {
    .ToolBar.mud-toolbar-gutters {
        padding-left: 12px;
    }
}


.Select {
}

.mud-select.Select .mud-input.mud-input-outlined.mud-input-adorned-end {
    padding-inline-end: 2px;
}


.TextField {
}

    .TextField .mud-input > input.mud-input-root-outlined, .TextField * div.mud-input-slot.mud-input-root-outlined {
        padding: 8px 0px 4px 8px;
        font-size: 0.92rem;
        font-weight: 500;
    }

    .TextField.Dense .mud-input > input.mud-input-root-outlined, .TextField.Dense * div.mud-input-slot.mud-input-root-outlined {
        padding: 2px 0px 1px 5px;
        font-size: 0.90rem;
        font-weight: 500;
    }

    .TextField .mud-input-control > .mud-input-control-input-container > .mud-input-label-outlined.mud-input-label-inputcontrol {
        line-height: 16px;
    }

    .TextField .mud-shrink ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-outlined, .mud-input:focus-within ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-outlined {
        transform: translate(14px,-6px) scale(.70);
        font-weight: 400;
    }

    .TextField * .mud-icon-size-small {
        font-size: 1.1rem;
    }

    .TextField * .mud-icon-button-size-small {
        padding: 1px;
    }

    .TextField .mud-input-label-outlined {
        transform: translate(14px,9px) scale(0.9);
        background-color: var(--containerBackGround)
    }

    .TextField > .mud-input-control > .mud-input-control-input-container > .mud-input-label-outlined.mud-input-label-inputcontrol {
        line-height: 16px;
    }

    .TextField > .mud-input-control-input-container > .mud-input-label-inputcontrol {
        font-weight: 500;
    }

    .TextField.NoHead.mud-input-control {
        margin-top: unset;
    }

    .TextField * .mud-icon-button-edge-margin-end {
        margin-inline-end: 4px;
    }

    .TextField * .mud-input > textarea.mud-input-root-outlined {
        margin: 5px 8px;
    }

.Table {
}

    .Table.MultiSelect * tr > th:first-child {
        width: 30px;
    }

    .Table * thead {
        background-color: var(--tableThead);
    }

    .Table * .mud-table-row .mud-table-cell .CheckBox {
        display: flex;
        align-items: center;
    }

    .Table .mud-table-root .mud-table-head .mud-table-cell {
        color: var(--mud-palette-text-primary);
        font-weight: 500;
        text-align: center;
        line-height: 1.1rem;
    }

    .Table * .mud-table-cell *.mud-input > input.mud-input-root-outlined, .Table .mud-table-root * .mud-table-head .mud-table-cell div.mud-input-slot.mud-input-root-outlined {
        padding: 4px 0px 1px 6px;
        font-size: 0.92rem;
        font-weight: 500;
    }

    .Table * .mud-table-cell * .mud-input > input.mud-input-root-outlined, .Table * .mud-table-cell * div.mud-input-slot.mud-input-root-outlined {
        padding: 4px 0px 1px 6px;
        font-size: 0.92rem;
        font-weight: 500;
    }


    .Table * .mud-table-cell *.mud-input-control {
        margin-top: unset;
    }

    .Table * .mud-table-cell * .mud-input.mud-input-outlined.mud-input-adorned-end {
        padding-right: 0px;
        padding-inline-end: 8px;
        padding-inline-start: unset;
    }

    .Table * .mud-table-cell * .mud-select .mud-input.mud-input-outlined.mud-input-adorned-end {
        padding-inline-end: 0px;
    }

    .Table * .mud-table-cell > .mud-picker * .mud-input-adornment-end {
        margin-inline-start: 0px;
    }

    .Table * .mud-table-cell .mud-icon-button {
        padding: 2px;
    }

    .Table * .mud-table-cell * .mud-icon-size-medium {
        font-size: 1.3rem;
    }

    .Table * .mud-table-cell > .mud-table-sort-label .mud-icon-size-medium {
        font-size: 1rem;
        margin: 0px;
    }

    .Table.P4 * .mud-table-cell {
        padding: 4px;
    }

    .Table.P2 * .mud-table-cell {
        padding: 2px;
    }

    .Table * .mud-table-cell {
        padding: 8px;
        text-align: center;
    }

        .Table * .mud-table-cell .mud-input-control * .mud-icon-button {
            padding: 0px;
        }

        .Table * .mud-table-cell .mud-input-control * .mud-icon-size-small {
            font-size: 1.1rem;
            margin-top: 2px;
        }

        .Table * .mud-table-cell .mud-input-control * .mud-icon-button-edge-margin-end {
            margin-right: 5px;
            margin-inline-end: 5px;
        }

        .Table * .mud-table-cell .mud-checkbox {
            margin: 0px;
        }


        .Table * .mud-table-cell .mud-autocomplete .mud-input-control * .mud-icon-button {
            margin-right: 2px;
        }

        .Table * .mud-table-cell .mud-picker * .mud-icon-button-edge-end {
            margin-inline-end: -8px;
        }

.Autocomplete {
}

    .Autocomplete .mud-input > input.mud-input-root-outlined, .Autocomplete * div.mud-input-slot.mud-input-root-outlined {
        padding: 8px 0px 4px 8px;
        font-size: 0.92rem;
        font-weight: 500;
    }

    .Autocomplete .mud-input-control > .mud-input-control-input-container > .mud-input-label-outlined.mud-input-label-inputcontrol {
        line-height: 16px;
    }

    .Autocomplete .mud-shrink ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-outlined, .mud-input:focus-within ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-outlined {
        transform: translate(14px,-6px) scale(.70);
        font-weight: 400;
    }

    .Autocomplete .mud-input-label-outlined {
        transform: translate(14px,9px) scale(0.9);
        background-color: var(--containerBackGround)
    }

    .Autocomplete > .mud-input-control > .mud-input-control-input-container > .mud-input-label-outlined.mud-input-label-inputcontrol {
        line-height: 16px;
    }

    .Autocomplete > .mud-input-control-input-container > .mud-input-label-inputcontrol {
        font-weight: 500;
    }

    .Autocomplete * .mud-icon-size-small {
        font-size: 1.1rem;
    }

    .Autocomplete * .mud-icon-button-size-small {
        padding: 1px;
    }

    .Autocomplete * input {
        text-transform: uppercase;
    }

.CheckBox {
    display: flex;
    justify-content: center;
}

    .CheckBox .mud-icon-button {
        padding: 2px;
    }

.IconButton {
}

    .IconButton.mud-icon-button {
        padding: 2px;
    }


.DatePicker {
}

    .DatePicker .mud-input > input.mud-input-root-outlined, .DatePicker * div.mud-input-slot.mud-input-root-outlined {
        padding: 8px 0px 4px 8px;
        font-size: 0.92rem;
        font-weight: 500;
    }

    .DatePicker.Dense .mud-input > input.mud-input-root-outlined, .DatePicker.Dense * div.mud-input-slot.mud-input-root-outlined {
        padding: 3px 0px 1px 4px;
        font-size: 0.92rem;
        font-weight: 500;
    }

    .DatePicker.Dense > div.mud-input-control {
        margin: auto;
    }

    .DatePicker .mud-input-control > .mud-input-control-input-container > .mud-input-label-outlined.mud-input-label-inputcontrol {
        line-height: 16px;
    }

    .DatePicker .mud-shrink ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-outlined, .mud-input:focus-within ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-outlined {
        transform: translate(14px,-6px) scale(.70);
        font-weight: 400;
    }

    .DatePicker .mud-input-label-outlined {
        transform: translate(14px,9px) scale(0.9);
        background-color: var(--containerBackGround)
    }

    .DatePicker > .mud-input-control > .mud-input-control-input-container > .mud-input-label-outlined.mud-input-label-inputcontrol {
        line-height: 16px;
    }

    .DatePicker > .mud-input-control-input-container > .mud-input-label-inputcontrol {
        font-weight: 500;
    }

    .DatePicker * .mud-icon-size-small {
        font-size: 1.1rem;
    }

    .DatePicker * .mud-icon-button-size-small {
        padding: 1px;
    }

    .DatePicker * .mud-input.mud-input-outlined.mud-input-adorned-end {
        padding-inline-end: 8px;
    }

    .DatePicker * .mud-input-adornment-end {
        margin-inline-start: 4px;
    }


    .DatePicker * mud-input-adornment .mud-icon-button-edge-end {
        margin-right: 0px;
        margin-inline-end: -4px;
        padding: 0px;
    }

    .DatePicker * .mud-icon-button-label > .mud-icon-size-medium {
        font-size: 1.4rem;
    }

    .DatePicker * .mud-input-adornment .mud-icon-button-edge-end {
        margin-right: 0px;
        margin-inline-end: -4px;
        padding: 0px;
    }

.TabPanel {
}

    .TabPanel.mud-tab {
        padding: 5px 0px 0px 3px;
        min-height: 21px;
    }

    .TabPanel * .mud-icon-button {
        padding: unset;
        margin-left: 3px;
    }

    .TabPanel * .mud-icon-size-medium {
        font-size: 1.15rem;
    }



.NumericField {
}

    .NumericField.mud-input-control.mud-input-number-control.mud-input-showspin .mud-input:not(.mud-input-adorned-end).mud-input-outlined input {
        padding-inline-start: 8px;
    }

    .NumericField * .mud-button-label > .mud-icon-size-medium {
        font-size: 1.15rem;
    }


.FieldContainer {
    display: block;
    padding-top: 6px;
    padding-bottom: 2px;
}

    .FieldContainer .mud-input-control {
        margin-top: 2px;
    }

    .FieldContainer > .fieldName {
        padding-left: 10px;
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
    }

        .FieldContainer > .fieldName.checkBox {
            display: flex;
            justify-content: center;
            padding-left: unset
        }

        .FieldContainer > .fieldName.mtySpace {
            margin-top: 17px;
        }

    .FieldContainer .context {
        display: flex;
    }

    .FieldContainer * .mud-input-control-helper-container {
        display: none;
    }


.mud-list-item-gutters {
    padding-left: 12px;
    padding-right: 12px;
}

.mud-list-item {
    padding-top: 2px;
    padding-bottom: 2px;
}

.mud-list-item-text > p {
    font-size: 0.9rem;
}


.ChipSet {
    display: flex;
    align-items: flex-end;
    padding-bottom: 3px;
}

    .ChipSet .mud-chip-filled {
        background-color: #3592b44a;
    }

    .ChipSet .mud-chip {
        padding: 0px 8px;
    }

        .ChipSet .mud-chip.mud-chip-size-medium {
            height: 26px;
            font-size: 12px;
            border-radius: 10px;
        }

        .ChipSet .mud-chip .mud-chip-close-button .mud-icon-size-small {
            font-size: 1.05rem;
        }

.tableMenu {
    min-height: 30px;
}

.Container-table .tableMenu {
    display: flex;
    justify-content: space-between;
    padding-right: 10px;
    height: 30px;
}

    .Container-table .tableMenu .mud-pagination-small .mud-pagination-item > * {
        height: 21px;
        min-width: 21px;
    }


.RadioButton {
}

    .RadioButton * .mud-icon-button {
        padding: 4px;
    }

    .RadioButton * .mud-radio-content-placement-end {
        margin-inline-start: 0px;
    }


.TextAlignCenter {
}

    .TextAlignCenter * input {
        text-align: center;
    }