body {
    background-color: #F3F2F8 !important;
}

* {
    scrollbar-color: #4D5470 transparent !important;
}

.mud-snackbar-content-message {
    white-space: pre-line;
}

.mud-card-actions button {
    margin: 8px;
}

.mud-popover {
    white-space: pre-line;
    max-width: 100vh;
}

.mud-button {
    margin: 5px;
}

.mud-table-cell {
    text-align: center;
}

.mud-table-sort-label .mud-table-sort-label-icon {
    opacity: .2;
}

.word-wrap-break-word {
    word-wrap: break-word;
}

.pauk-date-picker {
    position: relative;
}

    .pauk-date-picker > .clear-date-time-picker {
        position: absolute;
        right: 35px;
        top: 5px;
    }

    .pauk-date-picker > .clear-date-time-picker-horizontal {
        position: absolute;
        right: 46px;
        top: 31px;
    }

    .pauk-date-picker > .date-time-picker-action {
        position: absolute;
        right: 70px;
        top: 5px;
    }

    .pauk-date-picker > .date-time-picker-action-horizontal {
        position: absolute;
        right: 70px;
        top: 29px;
    }

.pauk-date-picker-old {
    position: relative;
}

    .pauk-date-picker-old > .clear-date-time-picker-old {
        position: absolute;
        right: 25px;
        top: 7px;
    }

    .pauk-date-picker-old > .date-time-picker-action-old {
        position: absolute;
        right: 65px;
        top: 7px;
    }

.pauk-parent-component {
    position: relative;
}

    .pauk-parent-component > .pauk-child-component {
        position: absolute;
        right: 0px;
        top: -25px;
    }

.mud-table-root {
    table-layout: fixed;
}

.mud-time-picker-dial {
    top: 0;
}

.work-station-stick-to-top {
    position: sticky;
    top: 62px;
    z-index: 999;
}

.mud-table-dense * .mud-table-row .mud-table-cell {
    padding: 6px 8px 6px 8px;
    padding-inline-start: 8px;
    padding-inline-end: 8px;
    text-overflow: ellipsis;
    overflow: hidden;
}

.pdf-preview-frame {
    height: 50vh;
    width: 50%;
    position: fixed;
    left: 43rem;
    bottom: 20vh;
    z-index: 2;
    visibility: visible !important;
}

.mud-simple-table table * tr > th {
    text-align: center;
}

.title-heading {
    font-family: 'Arial';
    font-style: normal;
    font-weight: 700;
    font-size: 30px;
    color: #000000;
}

.info-title {
    font-family: 'Arial';
    font-style: normal;
    font-weight: 700;
    font-size: 25px;
    line-height: 29px;
    color: #242133;
}

.mud-input > input.mud-input-root,
div.mud-input-slot.mud-input-root,
.mud-input > textarea.mud-input-root {
    color: #0A0A0A;
    font-weight: 400;
}

.recapitualtion-table thead {
    background-color: #4D5470 !important;
    color: #FFFFFF !important;
    height: 56px !important;
}

.pauk-custom-table thead {
    background-color: #4D5470 !important;
    color: #FFFFFF !important;
    height: 56px !important;
}

    .pauk-custom-table thead .mud-typography-body2 {
        font-weight: 500 !important;
        font-size: 16px !important;
    }

    .pauk-custom-table thead .mud-typography-body1 {
        font-weight: 500 !important;
        font-size: 16px !important;
    }

    .pauk-custom-table thead td {
        font-weight: 500 !important;
        font-size: 16px !important;
    }

.pauk-custom-table-bordered thead td {
    border-right: 1px solid var(--mud-palette-table-lines);
    border-left: 1px solid var(--mud-palette-table-lines);
}

.pauk-custom-header-cell {
    background-color: #4D5470 !important;
    color: #FFFFFF !important;
    font-weight: 500 !important;
    font-size: 16px !important;
}

.pauk-custom-table.mud-simple-table.mud-table-sticky-header * table thead * th {
    background-color: #4D5470 !important;
}

/*.pauk-custom-table .mud-typography-body2 {
    font-size: 16px !important;
}*/
.recapitualtion-table .mud-typography-body2 {
    font-weight: 500 !important;
    font-size: 16px !important;
}

.move-label-up .mud-shrink ~ label.mud-input-label.mud-input-label-inputcontrol {
    margin-top: -16px !important;
}

.mud-shrink ~ label.mud-input-label.mud-input-label-inputcontrol, .mud-input:focus-within ~ label.mud-input-label.mud-input-label-inputcontrol {
    transform: translate(0,1.5px) scale(1);
    transform-origin: top left;
    font-size: 0.75rem;
}

/*.mud-popover.mud-popover-open {
    max-width: max-content !important;
}*/

.pauk-primary-button {
    height: 40px !important;
    padding: 0px 12px !important;
    border-radius: 4px !important;
    background: #285CDA !important;
    color: white !important;
    font-family: Roboto !important;
    font-size: 18px !important;
    font-style: normal !important;
    font-weight: 500 !important;
    line-height: normal !important;
    text-transform: capitalize !important;
}

    .pauk-primary-button:hover {
        background: #184AC1 !important;
        color: white !important;
    }

    .pauk-primary-button:disabled, .pauk-primary-button[disabled] {
        background-color: #D0D0D0 !important;
        color: white !important;
    }

.pauk-primary-button-without-height {
    background: #285CDA !important;
    color: white !important;
    font-size: 1rem;
    margin: 0px;
}

    .pauk-primary-button-without-height:hover {
        background: #184AC1 !important;
        color: white !important;
    }

    .pauk-primary-button-without-height:disabled, .pauk-primary-button-without-height[disabled] {
        background-color: #D0D0D0 !important;
        color: white !important;
    }

.pauk-secondary-button {
    height: 40px !important;
    padding: 0px 12px !important;
    border-radius: 4px !important;
    background: #F3F2F8 !important;
    color: #285CDA !important;
    font-family: Roboto !important;
    font-size: 18px !important;
    font-style: normal !important;
    font-weight: 500 !important;
    line-height: normal !important;
    text-transform: capitalize !important;
}

    .pauk-secondary-button:hover {
        background: #e9e8ed !important;
    }

.pauk-danger-button {
    height: 40px !important;
    padding: 0px 12px !important;
    border-radius: 4px !important;
    background: #F3F2F8 !important;
    color: #D50000 !important;
    font-family: Roboto !important;
    font-size: 18px !important;
    font-style: normal !important;
    font-weight: 500 !important;
    line-height: normal !important;
    text-transform: capitalize !important;
}

    .pauk-danger-button:hover {
        background: #e9e8ed !important;
    }

.pauk-navy-button {
    height: 40px !important;
    padding: 0px 12px !important;
    border-radius: 4px !important;
    background: #F3F2F8 !important;
    color: #4D5470 !important;
    font-family: Roboto !important;
    font-size: 18px !important;
    font-style: normal !important;
    font-weight: 500 !important;
    line-height: normal !important;
    text-transform: capitalize !important;
}

    .pauk-navy-button:hover {
        background: #e9e8ed !important;
    }

.pauk-dark-button {
    height: 40px !important;
    padding: 0px 12px !important;
    border-radius: 4px !important;
    background: #4D5470 !important;
    color: #FFFFFF !important;
    font-family: Roboto !important;
    font-size: 18px !important;
    font-style: normal !important;
    font-weight: 500 !important;
    line-height: normal !important;
    text-transform: capitalize !important;
}

    .pauk-dark-button:disabled, .pauk-dark-button[disabled] {
        background: #F3F2F8 !important;
        color: #4D5470 !important;
    }

    .pauk-dark-button:hover, .pauk-dark-button:active {
        background: #2e3243 !important;
    }

.custom-action-icon-color button {
    color: #285CDA !important;
}

    .custom-action-icon-color button:hover {
        color: white !important;
        background: #285CDA !important;
    }


.expansion-title {
    font-size: 18px;
    font-weight: 600;
    font-family: Roboto;
    font-style: normal;
    line-height: normal;
    color: #4D4D4D;
}

.feedback-message {
    color: #A1A0A0;
    font-family: Roboto;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.custom-mud-card-properties {
    border-radius: 8px !important;
    border: 1px solid #F2EEEE !important;
    margin: 16px !important;
}

.custom-pauk-input .mud-shrink ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-outlined, .custom-pauk-input .mud-input:focus-within ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-outlined {
    transform: none !important;
    font-weight: 500 !important;
    background: transparent;
}

.custom-pauk-input .mud-shrink ~ label.mud-input-label.mud-input-label-inputcontrol, .custom-pauk-input .mud-input:focus-within ~ label.mud-input-label.mud-input-label-inputcontrol {
    font-size: 1.0rem;
}

.custom-pauk-input .mud-input-label-outlined.mud-input-label-margin-dense {
    transform: none !important;
}

.custom-pauk-input .mud-input-label-animated {
    transition: none !important;
}

.custom-pauk-input .mud-input-control > .mud-input-control-input-container > .mud-input-label-inputcontrol {
    font-weight: 500 !important;
}

.expansion-panel-text-custom-pauk-style {
    color: #4D4D4D !important;
    font-family: Roboto !important;
    font-size: 18px !important;
    font-style: normal !important;
    font-weight: 600 !important;
    line-height: normal !important;
}

.pauk-item-heading {
    color: #676869;
    font-family: Roboto;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}


.custom-pauk-input.mud-input-control-input-container {
    display: flex;
    flex-direction: column;
    position: relative;
}

.custom-pauk-input .mud-input-outlined .mud-input-outlined-border {
    display: none;
}

.custom-pauk-input .mud-input-outlined {
    order: 2;
    border-color: var(--mud-palette-lines-inputs);
    border-radius: var(--mud-default-borderradius);
    border-width: 1px;
    border-style: solid;
}

.custom-pauk-input .mud-input > textarea.mud-input-root.mud-input-root-margin-dense {
    margin-top: 0px;
}

.custom-pauk-input .mud-input-outlined:focus-within {
    outline: 2px solid var(--mud-palette-primary);
}

.custom-pauk-input .mud-input-label {
    order: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    top: -24px;
    left: -5px;
    color: #4D5470 !important;
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 500 !important;
    line-height: normal;
}

.custom-pauk-input label.mud-input-label.mud-input-label-animated.mud-input-label-outlined.mud-input-label-margin-dense.mud-disabled.mud-input-label-inputcontrol {
    color: #b3b3b3 !important;
}

.custom-pauk-input .mud-input > input.mud-input-root:disabled, div.mud-input-slot.mud-input-root:disabled {
    color: var(--mud-palette-text-disabled);
}

.custom-pauk-input.mud-input-required .mud-input-label {
    color: #285CDA !important;
}

.custom-pauk-input .mud-input-required .mud-input-label {
    color: #285CDA !important;
}

.custom-pauk-input .mud-input:has(input[readonly]:not(.mud-select-input)) {
    background: #F4F3F8 !important;
}

.custom-pauk-input .mud-input-auto-grow .mud-input-root {
    min-height: 40px !important;
}

.pauk-nav-selected-button {
    padding: 9px 16px !important;
    border-radius: 100px !important;
    background: #285CDA !important;
    color: white !important;
    font-family: Roboto !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    font-style: normal !important;
    line-height: normal !important;
    margin: 6px !important;
    display: inline-flex !important;
    text-transform: capitalize !important;
}

    .pauk-nav-selected-button:hover:focus:active {
        background: #285CDA !important;
        color: white !important;
    }

.pauk-nav-not-selected-button {
    padding: 9px 16px !important;
    border-radius: 100px !important;
    border: 1px solid #D9D9D9 !important;
    background: white !important;
    color: #898989 !important;
    font-family: Roboto !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    font-style: normal !important;
    line-height: normal !important;
    margin: 6px !important;
    display: inline-flex !important;
    text-transform: capitalize !important;
}

    .pauk-nav-not-selected-button:hover {
        background: #F5F5F7 !important;
    }

.pauk-nav-disabled-selected-button {
    padding: 9px 16px !important;
    border-radius: 100px !important;
    border: 1px solid #D9D9D9 !important;
    background: white !important;
    color: rgba(0, 0, 0, 0.26) !important;
    font-family: Roboto !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    font-style: normal !important;
    line-height: normal !important;
    margin: 6px !important;
    display: inline-flex !important;
    text-transform: capitalize !important;
}

    .pauk-nav-disabled-selected-button:hover {
        cursor: default !important;
    }

.price-info-paper-container {
    height: 114.283px;
    width: 212px;
    border-radius: 8px;
    border: 1px solid #F2EEEE;
    background: #FFF;
}

.price-info-paper-container-blue-border {
    height: 114.283px;
    width: 212px;
    border-radius: 8px;
    border: 2px solid #285CDA;
    background: #FFF;
}

.price-info-label-text {
    color: #4D4D4D !important;
    font-size: 16px !important;
    font-style: normal !important;
    font-weight: 500 !important;
    line-height: normal !important;
    text-align: center !important;
}

.price-info-price-text {
    color: #4D4D4D !important;
    font-size: 20px !important;
    font-style: normal !important;
    font-weight: 500 !important;
    line-height: normal !important;
}

.pauk-mud-menu .mud-button {
    font-weight: 400 !important;
}

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

.mud-picker-datepicker-toolbar .mud-button-date {
    font-size: 1.5rem;
}

/* USED FOR REQUIRED ERROR ON CLIENT - zakomentirano zbog toga što se 
    u novoj verziji mud blazora error nalazi u helper-text kontenjeru koji ima 
    ishakiranu poziciju jer se koristi za PAUK DOCUMENTATION
*/
.mud-input-helper-text.mud-input-error {
    display: none !important;
}

.mud-input-helper-text.mud-input-helper-onfocus {
    content-visibility: hidden;
}

.mud-input-control-helper-container.px-2 {
    position: absolute;
    pointer-events: none;
    width: 100%;
    overflow: clip;
    top: -3px;
    overflow-clip-margin: 1000px;
    z-index: 1000;
}

.mud-input-control-helper-container {
    position: absolute;
    pointer-events: none;
    width: 100%;
    overflow: clip;
    top: -3px;
    overflow-clip-margin: 1000px;
    z-index: 1000;
}

    .mud-input-control-helper-container > .mud-input-error, .mud-input-control-helper-container.px-2 > .mud-input-error {
        display: none;
    }

.mud-input-control:focus-within .mud-input-helper-text.mud-input-helper-onfocus {
    border: 1px solid black;
    background-color: #285CDA;
    max-width: 400px;
    padding: 10px;
    content-visibility: visible;
    overflow: clip;
    overflow-clip-margin: 1000px;
    z-index: 1000;
    border-radius: 5px;
    color: white;
    transform: translateX(101%);
}

    .mud-input-control:focus-within .mud-input-helper-text.mud-input-helper-onfocus.left-align {
        border: 1px solid black;
        background-color: #285CDA;
        max-width: 400px;
        padding: 10px;
        content-visibility: visible;
        overflow: clip;
        overflow-clip-margin: 1000px;
        z-index: 5000;
        border-radius: 5px;
        color: white;
        transform: translateX(-101%);
    }

    .mud-input-control:focus-within .mud-input-helper-text.mud-input-helper-onfocus.top-align {
        border: 1px solid black;
        background-color: #285CDA;
        max-width: 400px;
        padding: 10px;
        content-visibility: visible;
        overflow: clip;
        overflow-clip-margin: 1000px;
        z-index: 5000;
        border-radius: 5px;
        color: white;
        transform: translateY(-101%) translateX(150%);
    }

.hashed-bg {
    background: repeating-linear-gradient( -45deg, #858585, #858585 2px, #777777 2px, #777777 20px);
}

.pauk-background-green {
    background-color: #88D66C;
}

.pauk-background-yellow {
    background-color: #FFFC9A;
}

.pauk-background-red {
    background-color: #F28585;
}

.pauk-background-pink {
    background-color: #EECAD5;
}

.pauk-background-blue {
    background-color: #8EACCD;
}

.pauk-info-theme {
    background-color: #4D5470 !important;
    color: white !important;
}

.pauk-workstation-log-button {
    white-space: pre-line;
    height: 370px;
    width: 370px;
    color: white;
    margin: 0px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

    .pauk-workstation-log-button .mud-button-label .pauk-workstatiom-log-button-label {
        display: flex;
        flex-direction: column;
        gap: 4px;
        font-size: 15px;
    }

    .pauk-workstation-log-button .workstation-button-individual-info {
        display: flex;
        gap: 6px;
        width: 350px !important;
        /*white-space: nowrap;*/
        overflow: hidden;
        text-align: start;
        max-height: 78.75px !important;
    }

.pauk-workstation-log-button-tech-procedure-order {
    height: 370px;
    width: 50px;
    background: #DC8686;
    color: white;
    font-size: 16px;
    font-weight: 600;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

.fw-500 .mud-typography {
    font-weight: 500 !important;
}

.fw-500 {
    font-weight: 500 !important;
}

.pauk-border {
    border-radius: 8px;
    border: 1px solid #F2EEEE;
}

.pauk-header-title {
    color: #4D4D4D;
    font-family: Roboto;
    font-size: 32px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.file-text {
    color: #285CDA;
    font-family: Roboto;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.file-text-deleted {
    color: #285CDA;
    font-family: Roboto;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-decoration: line-through;
}

.max-height-55 .mud-table-container {
    max-height: 55vh !important;
}

.pauk-bg-yellow {
    background-color: #FFFC9B;
}

.pauk-bg-red {
    background-color: #F28585;
}

.pauk-bg-orange {
    background-color: #FFBB64;
}

.pauk-bg-gray {
    background-color: #C7C8CC;
}

.pauk-bg-blue {
    background-color: #6FB2D2;
}

.pauk-bg-green {
    background-color: #C0EBA6;
}

.pauk-table .mud-table-head * {
    background-color: #4D5470 !important;
    color: #FFFFFF !important;
    height: 56px !important;
}

.pauk-table .mud-table-head span {
    font-size: 16px;
}

.pauk-table tr.mud-table-row .mud-table-cell:first-child div:first-child, .pauk-table tr.mud-table-row .mud-table-cell:first-child div:first-child label {
    justify-content: center;
    align-content: center;
}

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

.height-100 {
    height: 100%;
}

.width-100 {
    width: 100%;
}

.mud-grid-item {
    padding-left: 12px !important;
    padding-top: 12px !important;
    padding-right: 12px !important;
}

    .mud-grid-item:has(.mud-input-control-boolean-input) {
        align-content: end;
        align-items: end;
    }

.mud-form {
    display: block;
}

.mud-grid-item:has(.custom-pauk-input) {
    padding-top: 26px !important;
}

.mud-grid-item:has(.pauk-date-picker-horizontally) {
    padding: 0 !important;
}

.mud-grid, .mud-grid-spacing-xs-6 {
    width: 100% !important;
    margin-top: 0;
    margin-left: 0;
    padding-left: 4px;
    padding-right: 4px;
}

.pauk-multiselect-autocomplete .mud-chip .mud-chip-close-button {
    position: absolute;
    right: 10px;
    z-index: 2;
}

.pauk-multiselect-autocomplete .mud-chip-content {
    overflow: hidden;
    text-overflow: ellipsis;
}

.pauk-multiselect-autocomplete .mud-chip {
    padding-right: 28px;
}

/* ======================================== Pauk Report Layout ======================================== */

.pauk-report-layout .mud-tabs-panels {
    margin-top: 20px !important;
}

.pauk-report-layout .mud-radio-group {
    display: flex !important;
    flex-direction: column !important;
}

.pauk-report-layout .custom-toggle-group .mud-toggle-item {
    height: 50px !important;
    margin-top: 0px !important;
}

.pauk-report-layout .custom-toggle-group .mud-button {
    margin: 0;
}

.pauk-report-layout .custom-toggle-group .mud-button-label {
    text-transform: none;
    font-weight: 400;
}

.pauk-report-layout .mud-tab-slider {
    background: white !important;
}

.pauk-report-layout .mud-tab {
    color: white !important;
}

.pauk-report-layout .selected-toggle-item {
    background: #4d5470 !important;
    color: white !important;
}

.pauk-report-layout .mud-tabs-tabbar {
    background: #4d5470 !important;
}

/* =============================================================================== */