﻿
:root {
    --dropdown-input: 245px;
    --dropdown-sm-input: 180px;
    --primary-font-family: Roboto;
    --primary-color: #2C6ACC;
}

body {
    font-family: Roboto, sans-serif;
}

.content {
    padding-left: 0;
    padding-right: 0;
}

/* .content-panel {
     padding-left: 24px;
    ## padding-right: 24px;
} */

.navmenu-active {
    font-family: Roboto;
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    color: #2C6ACC;
    background-color: #F5F5F5;
}

.navmenu-inactive {
    font-family: Roboto;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    color: #6C7683;
    background-color: white;
    height: 56px;
    margin-bottom: 4px;
}

.navmenu-inactive a {
    height: 56px;
    margin: 0 !important;
}

.avatar {
    /* Rounded border */
    border-radius: 50%;
    /* Center the content */
    align-items: center;
    display: flex;
    justify-content: center;
    /* Size */
    height: 4rem;
    width: 4rem;
}

.avatar__image {
    /* Size */
    height: 50%;
    width: 50%;
}


.athugasemdbadge {
    /* Center the content */
    align-items: center;
    display: flex;
    justify-content: center;
    /* Colors */
    background-color: #2C6ACC !important;
    color: #FFFFFF !important;
    /* Rounded border */
    border-radius: 50% !important;
    position: absolute;
    height: 1.9rem;
    width: 1.9rem;
    left: 88px !important;
    top: -15px !important;
}


.headerbadge {
    align-items: center;
    display: flex;
    border-radius: 50% !important;
    background-color: #E747CD !important;
    color: #000 !important;
    position: absolute;
    height: 1.9rem;
    width: 1.9rem;
    left: 35px !important;
    top: -5px !important;
}


.textbadge {
    /* Center the content */
    align-items: center;
    display: flex;
    justify-content: center;
    /* Colors */
    background-color: #2C6ACC !important;
    color: #FFFFFF !important;
    /* Rounded border */
    border-radius: 50% !important;
    position: absolute;
    height: 1.9rem;
    width: 1.9rem;
    left: 94px !important;
    top: -15px !important;
}

.declaration-tabpanel {
    background: #f5f5f5 !important;
    background-color: #f5f5f5 !important;
    color: rgba(0, 0, 0, 0.60);
}

.tabpanel {
    background: #F5F5F5 !important;
    background-color: #F5F5F5 !important;
    color: rgba(0, 0, 0, 0.60);
}

.panel {
    background-color: #F5F5F5 !important;
    color: #2C6ACC !important;
}

.graybackground {
    background: #F5F5F5 !important;
}

.transparent {
    background: transparent;
}

.centering {
    align-items: center;
    display: flex;
    justify-content: center;
}

.vertical-center {
    margin: 0;
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.gray-surface label {
    background-color: #F5F5F5 !important;
}

.rightAlign input {
    text-align: right !important;
}

body {
   overflow-y: hidden !important;
}

.expansion--panel {
    background-color: #F5F5F5;
    color: #2C6ACC; 
}

.menu-button {
    background-color: #F5F5F5;
    padding: 6px 20px 6px 24px;
    border-radius: 4px;
    min-width: 270px;
    height: 40px;
    display: flex;
    align-items: center;
}

.menu-name {
    font-family: Roboto;
    font-style: normal;
    font-weight: 300;
    font-size: 12px;
    color: #8C8C8C;
    width: 100%;
    text-align: right;
    width: max-content;
    text-transform: capitalize;
}

.selected-tenant-item {
    font-size: 14px;
    color: #262626;
}

.menu-list {
    min-width: 270px;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.menu-list .mud-list-item-icon {
    min-width: 34px;
}

.menu-item {
    color: #262626;
    font-size: 14px;
}

.active-menu-item {
    background-color: #F5F5F5;
    color: #2C6ACC;
}

.mud-button-filled {
    box-shadow: none;
}

.mud-drawer--closed .mud-navmenu {
    text-align: center;
}

.mud-nav-link, .mud-list-subheader-gutters {
    padding: 10px 20px 10px 20px;
}

.mud-drawer--closed .mud-nav-link {
    padding: 10px 20px 10px 20px;
    line-height: normal;
}

.mud-drawer--closed .pending-icon .mud-nav-link {
    padding: 8px 16px 8px 18px;
}


.mud-table-container {
    max-height: calc(100vh - 184px);
    min-height: 300px;
}

.h-40 {
    height: 40px;
}

.new-version-button {
    text-transform: inherit;
    min-width: 98px;
    height: 40px;
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 16px;
}


.total-value {
    width: 100%;
    font-weight: bold;
    background-color: #F2F3FA;
    padding: 3px 18px;
    font-size: 13px;
    line-height: 24px;
}

.customs-broker-input {
    min-width: 245px;
    max-width: 245px;
    height: 40px;
}

.customs-broker-sm-input {
    min-width: 134px;
    max-width: 134px;
    height: 40px;
}

.mud-button-filled:hover, .mud-button-filled:focus-visible {
    box-shadow: none;
    opacity: 0.75;
}

.mud-button-outlined:hover {
    opacity: 0.8;
}

.menu-action-button {
    height: 40px !important;
    min-width: 245px;
}

.header-menu-action-button {
    height: 40px !important;
    min-width: 245px;
}

.menu-action-button .mud-button {
    min-width: 245px !important;
    border: 1px solid #262626;
    color: #000;
    font-weight: 400;
    color: #262626;
}

.menu-action-button .mud-button-label {
    text-transform: capitalize;
    justify-content: space-between;
    line-height: normal;
}

.text-underline {
    text-decoration: underline;
}

.status-unprocessed {
    border-radius: 8px;
    background: var(--magenta-magenta-1, #FFF0F6);
    box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.15);
    display: flex;
    width: 107px;
    height: 32px;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.popover-list {
    max-width: calc(2*var(--dropdown-input)) !important;
    width: calc(2*var(--dropdown-input)) !important;
    overflow-y: hidden;
}

.dropdown-list {
    overflow: hidden;
    width: calc(2*var(--dropdown-input));
}

.popover-sm-list {
    max-width: calc(2*var(--dropdown-sm-input)) !important;
    width: calc(2*var(--dropdown-sm-input)) !important;
    overflow-y: hidden;
}

.dropdown-sm-list {
    overflow: hidden;
    width: calc(2*var(--dropdown-sm-input));
}


.uppercase .mud-input-outlined .mud-input-root-outlined {
    text-transform: uppercase !important;
}

.hidden {
    display: none !important;
}
.search-input {
    min-width: 245px;
    margin-right: 24px;
}

.search-input svg {
   margin-top: 3px;
}

.search-input > .mud-input-control-input-container > .mud-input.mud-input-outlined > input ~ .mud-input-outlined-border {
    border-color: #262626;
}
.search-input > .mud-input-control-input-container > .mud-input.mud-input-outlined > input:focus ~ .mud-input-outlined-border {
    border-color: #2c6acc;
}

.default-button {
    height: 40px;
    text-transform: initial;
    line-height: normal;
}


.row-details-table {
    background-color: #fff !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.row-details-table .mud-table-container {
    margin-bottom: 0 !important;
}

.delete-line-icon .mud-icon-root svg {
    fill: #91979D;
}

.data-grid-table {
    padding-left: 16px !important;
    padding-right: 16px !important;
}

.data-grid-table .mud-table-container {
    min-height: 0;
    margin-bottom: 24px;
}

.hasErrors,
.hasErrors .mud-table-row {
    background-color: #FFF4F6 !important;
}

.rowIsDisabled,
.rowIsDisabled .mud-table-row {
    color: #FF7777 !important;
}

.rowIsNormal,
.rowIsNormal .mud-table-row {
    color: #161718 !important;
}

.mud-table-sticky-header * .mud-table-root .mud-table-head * .mud-table-cell {
    background-color: #f5f5f5 !important;
    background: #f5f5f5 !important;
}

.mud-table-bordered .mud-table-container .mud-table-root .mud-table-body .mud-table-row .mud-table-cell:not(:last-child) {
    border: none;
}

.data-grid-table .mud-table-cell .mud-icon-button:disabled {
    visibility: hidden;
}

.row-details-table .mud-table-container {
    height: auto;
    margin-top: 0;
    padding-bottom: 0 !important;
}


.row-details-table
.row-details-table .mud-table-container .mud-table-root .mud-table-body {
    background-color: transparent !important;
}

.row-details-table .mud-input-label-outlined {
    background-color: #f0f1f3;
}

/*.row-details-table .mud-table-row:hover {
    background-color: #fff !important
}*/

.description-field {
    background: #fff;
}

.description-field .mud-input-label {
    background-color: #fff;
}

.error-badge-number {
    border-radius: 50%;
    height: 32px;
    width: 32px;
    padding: 0;
    min-width: 0;
    background-color: #FFCCC7;
    color: #fff;
}

.error-badge-number-active {
    border-radius: 50%;
    height: 32px;
    width: 32px;
    padding: 0;
    min-width: 0;
    color: #fff;
    background-color: #F44336;
}

.view-attachment-label {
    text-transform: inherit;
    font-family: Roboto;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
}

.back-button {
    position: absolute;
}

.status-view {
    border: 1px solid #006D75;
    color: #006D75;
    border-radius: 8px;
    padding-inline: 8px;
    height: 32px;
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: normal;
}

.total--label {
    color: #262626;
    font-family: Roboto;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
}

.total--value {
    color: #262626;
    font-family: Roboto;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
}

.mud-table-toolbar {
    padding-left: 0;
    padding-right: 0;
    height: auto;
    flex-wrap: wrap;
}
.mud-table-toolbar [role=group] {
   /* CSS goes here */
    flex-wrap: wrap;
}

.mud-table {
    padding-left: 24px;
    padding-right: 24px;
}

.mud-table-cell {
    border-bottom: none;
}

.mud-table-container {
    margin-top: 8px;
}

.mud-table-striped .mud-table-container .mud-table-root .mud-table-body .mud-table-row:nth-of-type(odd) {
    background-color: #fff;
}

.table-header {
    height: 56px;
    background-color: #F5F5F5;
}

.table-row {
    height: 48px;
    background-color: #f0f1f3;
}

.mud-table-hover .mud-table-container .mud-table-root .mud-table-body .mud-table-row:hover, 
.mud-table-hover.mud-table-striped .mud-table-container .mud-table-root .mud-table-body .mud-table-row:nth-of-type(odd):hover {
    background-color: #E5EFFF;
}

.mud-expand-panel-header {
    width: max-content !important;
}

.primary-button {
    height: 40px;
    color: #FFF;
    background-color: #2C6ACC;
    border-radius: 4px;
    font-family: Roboto;
    font-size: 14px;
    font-weight: 700;
    text-transform: none;
    line-height: normal;
}

.outlined-button {
    height: 40px;
    color: #161718;
    background-color: #FFF;
    border: 2px solid #2C6ACC;
    border-radius: 4px;
    font-family: Roboto;
    font-size: 14px;
    font-weight: 700;
    text-transform: none;
    line-height: normal;
}

.send-button {
    height: 40px;
    margin-left: 14px;
    color: #FFF;
    background-color: #2C6ACC;
    border-radius: 4px;
    font-family: Roboto;
    font-style: normal;
    font-size: 14px;
    font-weight: 700;
    text-transform: none;
}

.headline {
    font-family: Roboto;
    font-style: normal;
    font-weight: 700;
    font-size: 13px;
    color: #262626;
    text-transform: uppercase;
}

.basic-info-tab {
    min-width: 180px !important;
    padding: 6px 0 !important;
}

.invoice-tab {
    min-width: 128px !important;
    padding: 6px 0 !important;
}

.text-tab {
    min-width: 70px !important;
    padding: 6px 0 !important;
}

.datepicker {
    min-width: 245px;
    max-width: 245px;
}

.error-text {
    font-family: Roboto;
    font-size: 11px;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.2px;
    color: #F5222D;
    height: 11px;
}

.warning-text {
    font-family: Roboto;
    font-size: 11px;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.2px;
    height: 11px;
    color: #722ED1;
}

.error-icon {
    height: 14px;
    width: 14px;
}

.relative {
    position: relative;
}

.disabled-total-input input {
    color: #262626 !important;
    font-weight: 700 !important;
    text-align: right;
}

.text-right {
    text-align: right;
}

.settings-nav-item .mud-nav-link-expand-icon {
    color: #2C6ACC;
}

.attachment-loader {
    right: 0;
    left: 0;
    margin: auto;
    position: absolute;
}

.status-chip {
    display: flex;
    align-items: center;
    border-radius: 8px;
    justify-content: center;
    line-height: normal;
    font-family: Roboto;
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
}

.declaration-number {
    font-family: var(--primary-font-family);
    font-style: normal;
    font-weight: 400;
    font-size: 10px;
    color: #595959;
}

.openedDeclaration {
    color: #8100AE !important;
    font-size: 13px !important;
}

.notOPenedDeclaration {
    color: #2C6ACC !important;
    font-size: 13px !important;
    font-weight: 400;
}

.calculation-method-field .mud-icon-button-edge-end {
    padding: 0;
    color: #00000089 !important;
}

.panel-card {
    margin: 0;
    background-color: #ffffff;
    padding-left: 16px;
    padding-top: 16px;
    padding-bottom: 16px;
    padding-right: 16px;
    border-radius: 4px !important;
    height: max-content;
}

.h-max-content {
    height: max-content;
}

.bg-white {
    background-color: #fff;
}

.mud-alert-outlined-success {
    background-color: #f5f5f5;
    border: none !important;
    border-radius: 8px;
    padding: 16px 24px;
    font-family: Roboto, sans-serif;
    font-size: 14px;
    font-weight: 500;
    min-height: 68px;
    color: #161718 !important; /* message text + close-× */
    box-shadow: none !important;
    border: 2px solid #54BC9B !important;
}

    .mud-alert-outlined-success .mud-icon-root {
        color: #54BC9B !important;
        margin-right: 16px;
    }

.mud-alert-outlined-error {
    background-color: #f5f5f5;
    border: none !important;
    border-radius: 8px;
    padding: 16px 24px;
    font-family: Roboto, sans-serif;
    font-size: 14px;
    font-weight: 500;
    min-height: 68px;
    color: #161718 !important; /* message text + close-× */
    box-shadow: none !important;
    border: 2px solid #F44336 !important;
}

    .mud-alert-outlined-error .mud-icon-root {
        color: #F44336 !important;
        margin-right: 16px;
    }

.mud-alert-outlined-info {
    background-color: #f5f5f5;
    border: none !important;
    border-radius: 8px;
    padding: 16px 24px;
    font-family: Roboto, sans-serif;
    font-size: 14px;
    font-weight: 500;
    min-height: 68px;
    color: #161718 !important; /* message text + close-× */
    box-shadow: none !important;
    border: 2px solid #722ED1 !important;
}

    .mud-alert-outlined-info .mud-icon-root {
        color: #722ED1 !important;
        margin-right: 16px;
    }

.mud-alert-outlined-warning {
    background-color: #f5f5f5;
    border: none !important;
    border-radius: 8px;
    padding: 16px 24px;
    font-family: Roboto, sans-serif;
    font-size: 14px;
    font-weight: 500;
    min-height: 68px;
    color: #161718 !important; /* message text + close-× */
    box-shadow: none !important;
    border: 2px solid #F44336 !important;
}

    .mud-alert-outlined-warning .mud-icon-root {
        color: #F44336 !important;
        margin-right: 16px;
    }


.mud-alert-filled-success {
    background-color: #E6FFFB;
    color: #450C59;
    border-left: 16px solid #08979C;
    min-height: 68px;
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
}

.mud-alert-filled-error {
    background-color: #FDEDED;
    color: #5F2120;
    border-left: 16px solid #F5222D;
    min-height: 68px;
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
}


.mud-alert-filled-info {
    background-color: #F9F0FF;
    color: #450C59;
    border-left: 16px solid #722ED1;
    min-height: 68px;
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
}

.mud-alert-filled-warning {
    background-color: #FFF4E6;
    color: #663C00;
    border-left: 16px solid #FF9238;
    min-height: 68px;
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
}

.hover-bg-none:hover {
    background-color: transparent;
}

.discount-table {
    box-shadow: none;
}

.discount-table-row:hover {
    background-color: transparent !important;
}

.drawer-table-value {
    font-family: Roboto;
    font-size: 12px;
    font-style: normal;
    font-weight: 300;
}


.description-tooltip-content {
    width: 350px;
    padding: 8px;
    text-align: left;
}

::deep .mud-button-group-root .mud-button-root + .mud-button-root {
    border-left: none !important;
}

.custom-grid {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    height: 100%;
}

.mud-drawer-open-mini-md-left .mud-main-content {
    width: calc(100vw - var(--mud-drawer-width-left));
    height: calc(100vh);
    overflow: auto;
}

.app-container {
    
    &:has(.mud-drawer-open-mini-md-left)
    {
        
        .mud-main-content {
            width: calc(100vw - var(--mud-drawer-width-mini-left));
            transition: width 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
            
        }

        .side-nav {
            width: 320px !important;
            transition: width 0.3s cubic-bezier(0.165, 0.84, 0.44, 1),
                        margin-right 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
        }

        .mud-drawer-content {
            transition: width 0.3s cubic-bezier(0.165, 0.84, 0.44, 1),
            margin-right 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
        }
    }



    &:has(.mud-drawer-close-mini-md-left) {
        .mud-main-content {
            width: calc(100vw - var(--mud-drawer-width-mini-left));
            overflow: auto;
            transition: width 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
        }

        .side-nav {
            width: var(--mud-drawer-width-mini-left) !important;
            margin-right: 1rem;
            transition: width 0.3s cubic-bezier(0.165, 0.84, 0.44, 1),
                        margin-right 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);

            
        }

        nav.mud-navmenu.mud-navmenu-default.mud-navmenu-margin-normal.mud-navmenu-rounded.menu-container {
            min-height: 30rem;
            .mud-nav-link .mud-nav-link-text
            {
                margin: auto;
                display: grid;
                justify-content: center;
            }

            .mud-menu-collapsed
                {
                    width: auto;
                    display: grid;
                    /* align-items: flex-start; */
                    justify-content: end;
                    position: relative;
                    /* left: 0; */
                    /* bottom: 0; */
                    left: auto;
                    bottom: auto;
                    padding: 0;
                    margin: 0;
                    width: 100%;
                }

            .mud-nav-group {
                width: 100%;
                padding: 0;

                .mud-collapse-container {
                    grid-template-rows: 1fr !important;
                    padding: 0.1rem;
                    margin: 0.1rem 0;
                    transition: grid-template-rows 300ms ease-in-out, padding 300ms, margin 300ms;

                }
                button {
                    display: none;
                }
            }

            .mud-popover.mud-popover-open {
                left: 65px;
                background-color: #450C59;
            }
        }

    }
}




.mud-drawer-close-mini-md-left .mud-main-content {
    width: calc(100vw - var(--mud-drawer-width-mini-left));
    height: calc(100vh);
    overflow: auto;
}

.invoice-lines-container {
    min-width: auto !important;
}

.invoice-lines-container .mud-table {
    min-width: auto !important;
}

.invoice-lines-container .mud-table-container {
    width: 100% !important;
    max-height: 600px;
}

#declarationmain-container {
    background-color: transparent;
}

#declarationmain-container {
    .tollmidlari {
        .mud-autocomplete {
            max-width: 245px;
        }
    }

}

#declarationmain-container [role=group] {
	 flex-wrap: wrap;
}

#declarationmain-container .currency-group {
	 display: flex;
	 flex-direction: row;
	 flex-wrap: nowrap;
	 gap: 0;
}

#declarationmain-container .currency-group .input-group {
    margin-right: 0.5rem;
}

.details-container {
	 height: fit-content;
}
#invoice-handling-container, #purchase-order-handling-container, .customers-grid, #suppliers-main-container {
	 height: 100%;
}

#invoice-handling-container .list-container, #purchase-order-handling-container .list-container, .customers-grid .list-container, #suppliers-main-container .list-container {
	 height: 100%;
}

.mud-tab-panel {
    text-transform: capitalize;
}

#invoice-handling-container .list-container .my-list-item, #purchase-order-handling-container .list-container .my-list-item, .customers-grid .list-container .my-list-item, #suppliers-main-container .list-container .my-list-item {
	 width: 100%;
}

#invoice-handling-container .fill-height, #purchase-order-handling-container .fill-height, .customers-grid .fill-height, #suppliers-main-container .fill-height {
	 height: 100% !important;
	 width: 100%;
}

#invoice-handling-container .details-container, #purchase-order-handling-container .details-container, .customers-grid .details-container, #suppliers-main-container .details-container {
	 height: 100%;
}

#invoice-handling-container .details-container .fill-height, #purchase-order-handling-container .details-container .fill-height, .customers-grid .details-container .fill-height, #suppliers-main-container .details-container .fill-height {
	 box-shadow: none;
}

.disabled-total-input
{
    padding-top: 4px;
}

.mud-tabs-panels
{
    flex: 1 auto;
    overflow: auto;
}

.mud-tabs {
    height: 100%;
}

.content {
    height: 100%;
}

.mud-tabs-toolbar {
    min-height: 3rem;
}
/* 1) Make html/body full‐height so 100vh isn’t fighting anything */
html, body {
    height: 100%;
    margin: 0;
}

/* 2) The two-row grid wrapper */
.page-wrapper {
    display: grid;
    grid-template-rows: auto 1fr; /* top panel = its content, bottom = fill */
    height: 100vh; /* entire viewport */
    gap: 16px; /* red gap between the two papers */
    box-sizing: border-box;
}

/* 3) Top panel is just natural height */
.top-panel {
    padding: 16px;
    overflow: hidden; /* never scroll here */
}

/* Bold all the cells in your selected row */
.mud-table-row.row-selected .mud-table-cell {
    font-weight: 600 !important;
}

/* Light gray + normal weight for normal rows */
.mud-table-row.row-normal .mud-table-cell {
    color: #888888 !important;
    font-weight: 400 !important;
}

/* Pale background for the “new” (empty) row */
.mud-table-row.row-new .mud-table-cell {
    background-color: rgba(0, 123, 255, 0.1) !important;
}

/* 4) Grid panel fills the bottom row */
.grid-panel {
    display: flex;
    flex-direction: column;
    overflow: hidden; /* kill any paper‐level scrolling */
}

    /* 5) Make the grid root fill that panel */
    .grid-panel .mud-data-grid-root {
        display: flex !important;
        flex-direction: column !important;
        flex: 1 1 auto !important;
        overflow: hidden !important; /* remove outer grid scrollbar */
    }

        /* 6) Only the <tbody> section scrolls */
        .grid-panel .mud-data-grid-root .mud-table-container {
            flex: 1 1 auto !important;
            overflow-y: auto !important;
            overflow-x: hidden !important;
        }



    /* New stuff */

    /* Fix sidebar that it doesnt go off screen and is inaccessible when all drawers are open */
    nav.mud-navmenu.mud-navmenu-default.mud-navmenu-margin-normal.mud-navmenu-rounded.menu-container {
        overflow: auto;
        margin-bottom: 18%;
        -ms-overflow-style: none;  /* hide scrollbar in IE and Edge */
        scrollbar-width: none;     /* hide scrollbar in Firefox */
    }

    nav.mud-navmenu.mud-navmenu-default.mud-navmenu-margin-normal.mud-navmenu-rounded.menu-container::-webkit-scrollbar {
        display: none;
    }


    .mud-elevation-1 {
        box-shadow: none !important;
    }

    aside.mud-drawer.mud-drawer-pos-right.mud-drawer--closed.mud-drawer--initial.mud-drawer-md.mud-drawer-clipped-never.mud-elevation-1.mud-drawer-temporary {
        width: 0;
    }

    #invoice-handling-container .details-container .fill-height > .mud-paper, #purchase-order-handling-container .details-container .fill-height > .mud-paper, .customers-grid .details-container .fill-height > .mud-paper, #suppliers-main-container .details-container .fill-height > .mud-paper {
        padding-left: 1rem;
        padding-right: 1rem;
   }
    #invoice-handling-container .details-container .fill-height > .mud-drop-container > .mud-paper, #purchase-order-handling-container .details-container .fill-height > .mud-drop-container > .mud-paper, .customers-grid .details-container .fill-height > .mud-drop-container > .mud-paper, #suppliers-main-container .details-container .fill-height > .mud-drop-container > .mud-paper {
        padding-left: 1rem;
        padding-right: 1rem;
   }

   .mud-drawer.mud-drawer-pos-left.mud-drawer--closed.mud-drawer-md.mud-drawer-clipped-never.mud-elevation-1.mud-drawer-mini.drawer-container
   {
    padding: 0 !important;
    overflow: none;
    margin-top: 1rem;
    margin-left: 1rem;
   }

   .mud-popover.mud-popover-open {
        -webkit-clip-path: inset(-30px -30px -30px 2px);
        clip-path: inset(-30px -30px -30px 2px);
    }

.loader-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(255,255,255,0.6); /* semi-opaque “mask” */
    z-index: 10; /* above the grid */
}

    
.mud-table-dense * .mud-table-row .mud-table-cell {
    max-width: 320px;
    min-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
   
.tollvis-status-tag {
    .mud-chip-content {
        gap: 8px;
    }
}

.tollvis-icon {
    height: 20px;
    width: 20px;
}