.pl-fullscreen-center {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.e-sidebar.e-left.e-open.e-disable-animation, .e-sidebar.e-right.e-open.e-disable-animation, .e-sidebar.e-right.e-close.e-disable-animation, .e-sidebar.e-left.e-close.e-disable-animation {
    transition: width 0.5s;
    transform: unset !important;
}

.e-sidebar {
    overflow: hidden;
    display: flex;
}

.pl-planta-page-mi {
    background: #0079ae;
    color: white;
}
    .pl-planta-page-mi:hover {
        background: #005794;
        color: white;
    }

.pl-popup-module > div > div {
    max-height: 400px;
}

.pl-popover-content .pl-datafield-content {
    cursor: pointer;
}

.pl-error {
    background-color: #b22222;
    border-radius: 10px;
    padding: 20px;
    font-weight: 700;
    color: white;
}

.pl-info {
    background-color: #357e32;
    border-radius: 10px;
    padding: 20px;
    font-weight: 700;
    color: white;
}

.e-input-group .e-input[readonly], .e-input-group.e-control-wrapper .e-input[readonly], .e-float-input input[readonly], .e-float-input.e-control-wrapper input[readonly], .e-float-input textarea[readonly], .e-float-input.e-control-wrapper textarea[readonly] {
    background: unset;
    color: unset;
}

.login-form-content .mud-input-control > .mud-input-control-input-container > .mud-input-label-outlined.mud-input-label-inputcontrol {
    line-height: 1;
}

/* Scrollbar settings: */

/* For Chrome and other browsers that supports -webkit: */
@supports (-webkit-appearance: none) {
    ::-webkit-scrollbar {
        width: 10px;
        height: 10px;
    }

    ::-webkit-scrollbar-thumb {
        background: #666;
        border-radius: 3px;
    }

        ::-webkit-scrollbar-thumb:hover {
            background: #00355a;
        }

    ::-webkit-scrollbar-track {
        background: #f1f1f1;
    }
}

/* For Firefox and IE browsers: */
@supports not (-webkit-appearance: none) {
    div {
        scrollbar-color: #666 transparent;
        scrollbar-width: thin; /* also hides arrows on scrollbar */
    }
}

.e-navigate-arrow.e-arrow-up, .e-navigate-arrow.e-arrow-left {
    visibility: hidden;
}

.pl-textbox {
    width: 100%;
    height: 100%;
    border: 0;
    font: inherit;
    background-color: transparent;
}

.pl-button .mud-button {
    min-width: unset;
    background-color: white !important;
    border-radius: 0 !important;
    padding: 3px 3px !important;
    letter-spacing: unset;
    text-transform: unset;
}

.mud-tabs-panels {
    overflow: hidden !important;
}

.pl-button .mud-icon-root {
    width: unset;
    height: unset;
}
.pl-button .mud-button-icon-start {
    display: inherit;
    margin-left: unset;
    margin-right: unset;
    margin-inline-start: unset;
    margin-inline-end: unset;
}

.pl-icon-awesome {
    font-family: 'Font Awesome 6 Pro', 'Font Awesome 6 Free';
    font-weight: 400;
    font-size: 16px;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    line-height: 1;
    text-rendering: auto;
}

.pl-icon-delete::before {
    content: "\f1f8";
}

.pl-icon-insert::before {
    content: "\e59e";
}

.pl-ai-button::before {
    content: "\f890";
    padding-right: 8px;
}

.pl-icon-chrome {
    content: url(/icons/hlinks/chrome.png);
}

.pl-icon-edge {
    content: url(/icons/hlinks/edge.png);
}

.pl-icon-firefox {
    content: url(/icons/hlinks/firefox.png);
}

.pl-custom-link-default-icon {
    content: url(/icons/hlinks/link-solid.svg);
}

img.pl-icon- {
    display: none !important;
}

.mud-tab > .mud-popover-cascading-value {
    display: none;
}

/* Date field panel: rendered in the listbox popover, outside the field's DOM, so CSS isolation cannot reach it. */
/* The panel appears one round trip after the popover opens; reserving its size lets the popover flip on open. */
.pl-date-panel-host {
    min-width: 280px;
    min-height: 270px;
}

.pl-date-panel-host > .ant-picker {
    display: none;
}

/* AntDesign positions the panel absolutely from its hidden trigger; in the popover it must simply flow. */
.pl-date-panel-host .ant-picker-dropdown {
    position: static !important;
}

/* upload file tooltip, its a popup rendered outside of actual component, so css isolation does not work correctly */
.file-upload__file {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.file-upload__file a {
    white-space: nowrap;
    display: block;
    text-overflow: ellipsis;
    overflow: hidden;
    line-height: 21px;
    cursor: pointer;
    color: inherit;
}

.file-upload__link a {
    color: #1b6ec2;
    font-size: 13px;
    margin-top: 1px;
    display: block;
    text-overflow: ellipsis;
    overflow: hidden;
}

.file-upload__upload-button {
    color: inherit;
    cursor: pointer;
}

.file-upload__dropzone {
    height: 23px;
    /* for vertical aligning */
    line-height: 23px;
    cursor: pointer;
    font-size: 10px;
    font-style: italic;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The tooltip host and the trigger wrapper AntDesign puts between it and the field: both have
   to fill the cell, or the upload control shrinks to its content inside a grid row. */
.upload-static-tooltip,
.upload-static-tooltip > .antblazor-overlay-trigger-wrapper {
    width: 100%;
    height: 100%;
}

.upload-tooltip.e-tooltip-wrap.e-popup {
    background-color: white;
    padding: 0 18px;
}

.upload-tooltip.e-tooltip-wrap .e-arrow-tip-inner {
    color: white;
}

.upload-tooltip.e-tooltip-wrap .e-tip-content {
    padding: 0;
}

.upload-tooltip .e-upload {
    width: 300px;
    height: auto;
}

.upload-tooltip .e-upload .e-css.e-btn {
    background-color: white;
    border: 1px solid #6c757d;
    color: #6c757d;
}

.upload-tooltip .e-upload .e-css.e-btn:hover {
    border-color: #00355a;
    color: #00355a;
}

.file-upload-btn, .uploaded-file-name {
    margin: 0 auto;
}

.pl-popover {
    min-height: fit-content !important;
    box-shadow: 0 0 15px 5px rgba(0, 0, 0, 0.25);
    z-index: var(--z-index-listbox-module) !important;
}

.pl-popover .mud-file-upload > div > div {
    margin: 0 1.5rem;
    width: auto;
}

.mud-input-control.mud-file-upload .mud-input-control-input-container {
    display: flex !important;
}

.uploaded-file-info .uploaded-file-name {
    color: #0C0C0C;
    font-size: 1.5rem;
    margin: 0;
}

.uploaded-file-info .uploaded-file-size {
    color: #0C0C0C;
}

.uploaded-file-info .success-message {
    color: green;
    margin: 0;
}

.uploaded-file-info .mud-progress-linear {
    margin: 18px 0 !important;
}

@keyframes appear {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.mud-popover-open.pl-popover { 
    animation: appear 0.2s;
}

    .mud-popover-open.pl-popover.pl-tooltip-module {
        animation: appear 1s !important;
        z-index: var(--z-index-tooltip-module);
    }

.pl-popover.news-feed-popover {
    border-radius: 4px;
    overflow: hidden;
    margin-left: 28px;
    margin-top: 1px;
    z-index: calc(var(--z-index-top-element) + 10) !important;
}

.pl-listbox-popover {
    z-index: var(--z-index-listbox-module) !important;
}

.pl-global-search-module {
    z-index: var(--z-index-search-module);
}


/* Planta Effects */
.pl-effect-round, .pl-effect-round > img {
    border-radius: 50%;
}

.hlink-can-be-dropped {
    outline: 1px solid #00a9ff;
}

.pl-icon-onedrive.fa {
    color: #005794 !important;
    font-size: 11px !important;
}

/* PDF Preview Dialog styles
   These styles must be global because AntDesign Modal renders outside the component's DOM hierarchy */
.ant-modal:has(.pl-pdf-preview-container) .ant-modal-body {
    padding: 16px 24px;
}

.ant-modal.pl-pdf-preview-fullscreen {
    max-width: 100vw !important;
    width: 100vw !important;
    height: 100vh !important;
    top: -100vh !important;
    padding: 0 !important;
    margin: 0 !important;
}

.ant-modal.pl-pdf-preview-fullscreen .ant-modal-content {
    height: 100vh;
    border-radius: 0;
    display: flex;
    flex-direction: column;
}

.ant-modal.pl-pdf-preview-fullscreen .ant-modal-body {
    height: calc(100vh - 110px);
    flex: 1;
    overflow: hidden;
}

.ant-modal.pl-pdf-preview-fullscreen .pl-pdf-preview-container {
    max-height: calc(100vh - 140px);
    height: calc(100vh - 140px);
}

.ant-modal.pl-pdf-preview-fullscreen .pl-pdf-preview-grid {
    /* Grid uses absolute positioning, no max-height needed */
}

.ant-modal.pl-pdf-preview-fullscreen .pl-pdf-preview-grid-image {
    max-height: calc(100vh - 280px);
}

.ant-modal-wrap:has(.pl-pdf-preview-fullscreen) {
    overflow: hidden;
    z-index: var(--z-index-global-overlay-element);
}

/* === Excel export dialog (PlExcelExportDialog) ===
   AntDesign renders the modal header/body/footer outside the component's CSS-isolation scope, so
   the chrome is styled here under the two WrapClassName hooks rather than from the scoped file. */

/* A module hosted in a dialog sits on the server dialogs' layer, which outranks AntDesign's default
   modal z-index; without this the export dialog opens behind the module that raised it. */
.ant-modal-wrap.pl-excel-export-dialog,
.ant-modal-wrap.pl-excel-export-warning,
.ant-modal-root:has(.pl-excel-export-dialog) .ant-modal-mask,
.ant-modal-root:has(.pl-excel-export-warning) .ant-modal-mask {
    z-index: var(--z-index-tooltip);
}

.pl-excel-export-dialog .ant-modal-header,
.pl-excel-export-warning .ant-modal-header {
    padding: 24px 24px 20px !important;
    border-bottom: 1px solid #DEE2E6;
}

.pl-excel-export-dialog .ant-modal-body,
.pl-excel-export-warning .ant-modal-body {
    margin: 0 !important;
    padding: 20px 24px !important;
}

.pl-excel-export-dialog .ant-modal-body {
    border-bottom: 1px solid #DEE2E6;
}

.pl-excel-export-dialog .ant-modal-footer,
.pl-excel-export-warning .ant-modal-footer {
    padding: 20px 24px 24px !important;
}

.pl-excel-export-dialog .ant-modal-close-x {
    width: 54px;
    height: 54px;
    line-height: 54px;
}

.pl-excel-export-warning .ant-modal-title {
    color: #000;
    font-family: Asap, serif;
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 0.4px;
}

/* === Server dialogs ===
   The layer the server's dialogs open on, whether the class sits on the wrap or on the modal inside it. */
.ant-modal-root:has(.pl-server-dialog-layer) .ant-modal-wrap,
.ant-modal-root:has(.pl-server-dialog-layer) .ant-modal-mask {
    z-index: var(--z-index-server-dialog);
}

/* Zero specificity, so a dialog's own title and body styling still wins. */
:where(.ant-modal-root:has(.pl-server-dialog-layer)) .ant-modal-title {
    font-size: 16px;
    font-family: Asap, sans-serif;
}

:where(.ant-modal-root:has(.pl-server-dialog-layer)) .ant-modal-body {
    font-size: 14px;
    font-family: Asap, sans-serif;
}

/* === Confirm boxes (AntDesign ConfirmService) ===
   Above the server dialogs, so a box raised from inside one does not open behind it. */
.ant-modal-root:has(.ant-modal-confirm) .ant-modal-wrap,
.ant-modal-root:has(.ant-modal-confirm) .ant-modal-mask {
    z-index: var(--z-index-confirm-dialog);
}

/* === Dialog modules (PlDialogModule) ===
   AntDesign places a modal only centred or near the top, so the wrap is laid out as a flex box and
   the customizing's nine positions pick its alignment. The top inset clears the application header. */
.ant-modal-wrap.pl-dialog-module-wrap {
    display: flex;
    padding: 60px 24px 24px;
}

.pl-dialog-module-wrap .ant-modal {
    top: 0;
    margin: 0;
    padding-bottom: 0;
}

.pl-dialog-module-wrap .ant-modal-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    max-height: inherit;
}

.pl-dialog-module-wrap .ant-modal-header {
    padding: 16px 24px;
}

/* AntDesign renders an empty header even for a modal without a title. */
.pl-dialog-module-untitled .ant-modal-header {
    display: none;
}

/* A row, as MudBlazor's dialog content was: the module's content wrapper grows sideways and takes its height from the module, or stretches to a customized one. */
.pl-dialog-module-wrap .ant-modal-body {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: 8px 24px;
}

.pl-dialog-pos-top-left { align-items: flex-start; justify-content: flex-start; }
.pl-dialog-pos-top { align-items: flex-start; justify-content: center; }
.pl-dialog-pos-top-right { align-items: flex-start; justify-content: flex-end; }
.pl-dialog-pos-center-left { align-items: center; justify-content: flex-start; }
.pl-dialog-pos-center { align-items: center; justify-content: center; }
.pl-dialog-pos-center-right { align-items: center; justify-content: flex-end; }
.pl-dialog-pos-bottom-left { align-items: flex-end; justify-content: flex-start; }
.pl-dialog-pos-bottom { align-items: flex-end; justify-content: center; }
.pl-dialog-pos-bottom-right { align-items: flex-end; justify-content: flex-end; }

/* === User settings pages ===
   A page can be hosted by more than one dialog (the user settings dialog, and the keyboard dialog
   where that one cannot be reached), so what it needs in every host lives here rather than in a
   host's isolated CSS. A host tightens it further through ::deep. */

.pl-user-settings-page {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 560px;
    font-family: Asap, sans-serif;
    color: var(--pl-neutral-text-color-text, #0D1A26);
}

.pl-user-settings-page-title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
}

.pl-user-settings-page-intro {
    margin: 2px 0 0;
    font-size: 13px;
    line-height: 20px;
    color: var(--pl-neutral-text-color-text-tertiary, #6A778B);
    text-wrap: pretty;
}

.pl-user-settings-subtitle {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
}

.pl-user-settings-hint {
    font-size: 12px;
    line-height: 18px;
    color: var(--pl-neutral-text-color-text-tertiary, #6A778B);
}

.pl-user-settings-chip {
    flex: none;
    padding: 0 6px;
    border: 1px solid var(--pl-neutral-border-color-border-secondary, #DCE0EA);
    border-radius: 3px;
    background: var(--pl-neutral-bg-color-bg-layout, #F2F4F7);
    color: var(--pl-neutral-text-color-text-secondary, #495769);
    font-family: Inter, sans-serif;
    font-size: 12px;
    line-height: 20px;
}