body {
    background-image: url("media/background-image-XDXH6SJW.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 100vh
}

:root {
    --mud-palette-primary: #3592b4 !important;
    --containerBackGround: #f8fafbf2 !important;
    --containerItemBackGround: #f4fcff !important;
    --tableThead: #c7e2eb;
    --mud-appbar-height: 5px !important;
}


.mud-drawer-fixed.mud-drawer-mini.mud-drawer-clipped-always, .mud-drawer-fixed.mud-drawer-persistent:not(.mud-drawer-clipped-never), .mud-drawer-fixed.mud-drawer-responsive.mud-drawer-clipped-always, .mud-drawer-fixed.mud-drawer-temporary.mud-drawer-clipped-always {
    top: unset !important;
    height: 100% !important;
}

.mud-drawer.mud-drawer-mini.mud-drawer-pos-left.mud-drawer--open {
    width: var(--mud-drawer-width-mini-left) !important;
}

.mud-dialog {
    border: 5px ridge #8bb9c8;
    border-radius: 10px;
}

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

.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-2);
    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 10px 15px 10px;
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .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;
    }

.PageSelector {
    margin: auto;
}

    .PageSelector * .mud-input > input.mud-input-root-outlined, .PageSelector * div.mud-input-slot.mud-input-root-outlined {
        padding: unset;
        padding-left: 3px;
        text-align: center;
        font-size: 0.94em;
    }

    .PageSelector * .mud-input.mud-input-outlined.mud-input-adorned-end {
        padding-right: 0px;
    }


/*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;
    padding-top: 3px;
}

.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: 3px;
}


.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;
        padding: 0px 5px 10px;
    }

    .TextField.Select * .mud-input-adornment-end {
        margin-left: 3px;
    }

.Table {
}

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

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

    .Table * .mud-table-sticky-header * 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: 550;
        text-align: center;
        line-height: 1rem;
        text-transform: uppercase;
    }



    .Table.Head-sticky .mud-table-head {
        position: sticky;
        top: 0;
        z-index: 100;
    }

    .Table.Head-sticky .mud-table-container {
        overflow-y: auto;
    }


.mud-table-sticky-header * .mud-table-root .mud-table-head * .mud-table-cell {
    background-color: var(--tableThead);
}

.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 !important;
}

.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 !important;
}

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

.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;
    }

.Table * tr:first-child td

.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;
}

.Autocomplete *.mud-input.mud-input-outlined.mud-input-adorned-end {
    padding-right: 8px;
    padding-inline-end: 8px;
    padding-inline-start: unset;
}

.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.header-inline {
        display: flex;
        padding-top: 6px;
        padding-bottom: 2px;
        align-items: center;
    }

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

    .FieldContainer * div.fieldName {
        padding-left: 10px;
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        justify-content: space-between;
        text-wrap: nowrap;
        display: inline-block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 100%;
    }

    .FieldContainer.header-inline * div.fieldName {
        padding-left: 10px;
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        margin-right: 5px;
        text-wrap: nowrap;
        display: inline-block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 100%;
    }

    .FieldContainer * div.fieldName.checkBox {
        justify-content: center;
        padding-left: unset;
        text-wrap: nowrap;
        display: inline-block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 100%;
    }

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

    .FieldContainer .context {
        display: flex;
    }

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

    .FieldContainer * div.fieldName * .mud-chip.mud-chip-size-small {
        border-radius: 12px;
        font-size: 12px;
        height: 14px;
        padding: 0px 3px;
        margin: 0px !important;
        margin-bottom: 3px !important;
        margin-right: 3px !important;
        text-wrap: nowrap;
    }

    .FieldContainer * div.fieldName .mud-tooltip-root.mud-tooltip-inline {
        cursor: help;
    }

    .FieldContainer.inline-label {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }


    .FieldContainer * .fieldName[data-tooltip] {
        position: relative;
    }

        .FieldContainer * .fieldName[data-tooltip]:hover::after {
            content: attr(data-tooltip);
            position: absolute;
            top: 100%;
            left: 0;
            background: #333;
            color: white;
            padding: 5px 10px;
            border-radius: 4px;
            font-size: 11px;
            white-space: normal;
            max-width: 300px;
            z-index: 1000;
        }

.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;
    }



.table-rows-select {
}

    .table-rows-select * .mud-input.mud-input-outlined.mud-input-adorned-end {
        padding-right: 1px;
        padding-inline-end: 4px;
        padding-inline-start: unset;
    }

    .table-rows-select * .mud-input > input.mud-input-root-outlined.mud-input-root-adorned-end, div.mud-input-slot.mud-input-root-outlined.mud-input-root-adorned-end {
        padding-right: 0;
        padding-inline-end: 5px;
        padding-inline-start: 7px;
    }

    .table-rows-select * .mud-input > input.mud-input-root-outlined.mud-input-root-margin-dense, div.mud-input-slot.mud-input-root-outlined.mud-input-root-margin-dense {
        padding-top: 5px;
        padding-bottom: 4px;
    }

    .table-rows-select * .mud-icon-size-small {
        font-size: 0.8rem;
    }

    .table-rows-select * .mud-icon-size-medium {
        font-size: 0.8rem;
    }

    .table-rows-select * .mud-icon-button-size-small {
        padding: 0px;
        font-size: 0.8rem;
    }

    .table-rows-select * .mud-input-control.mud-input-control-margin-dense {
        margin: 0px;
    }

    .table-rows-select * .mud-icon-button-size-small.mud-icon-button-edge-end {
        margin-right: -3px;
        margin-inline-end: -3px;
        margin-inline-start: unset;
    }



    .table-rows-select * .mud-input {
        color: #444444;
        font-family: 'Montserrat', sans-serif;
        font-weight: 400;
        font-size: 14px;
    }


        .table-rows-select * .mud-input.mud-input-outlined .mud-input-outlined-border {
            border-radius: 3px;
            border-color: #79a8be;
            border-width: 0.5px;
        }


    .table-rows-select * .mud-input-outlined {
        border-color: #79a8be;
    }

.table-rows-mudSelect > div > div {
    padding: 0px !important;
}


.mud-list > div {
    padding: 2px 5px;
}

.mud-list * .mud-list-item-text {
    margin-top: 2px;
    margin-bottom: 2px;
}

    .mud-list * .mud-list-item-text > p {
        font-family: 'Montserrat', sans-serif;
        font-weight: 400;
        font-size: 12px;
    }

@media (hover: hover) and (pointer: fine) {
    .mud-list-item-clickable:hover {
        background-color: #75D2FF !important;
        color: white;
    }

    .mud-list * .mud-list-item-text:hover > p {
        font-weight: 500;
    }
}

.table-rows-select * .mud-icon-root.mud-svg-icon {
    fill: #4698BF;
}


@media (hover: hover) and (pointer: fine) {
    .mud-input.mud-input-outlined:not(.mud-disabled):not(:focus-within):hover .mud-input-outlined-border {
        border-width: 1px;
        border-color: #79a8be;
    }
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}