@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

html, body {
    font-family: Asap, Roboto, sans-serif !important;
    font-size: 12px;
    height: 100%;
    overflow: hidden;
}

/* Bootstrap styles plain button:focus — a black ring after every mouse click.
   Suppress it for pointer only; keyboard focus keeps its ring. */
button:focus:not(:focus-visible) {
    outline: none;
}

.e-control {
    font-family: Asap, Roboto, sans-serif !important;
}

body {
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;

    /* Reset the MudBlazor letter spacing to avoid cutting text */
    --mud-typography-default-letterspacing: 0;
}

    body:has(.moving) {
        -webkit-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

.mud-overlay {
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

        body:has(.moving):not(:has(.resizing)) {
            cursor: url('icons/cursors/up-down-left-right.svg') 2 2, auto !important;
        }

    body:has(.resizing) {
        cursor: col-resize !important;
    }

a, .btn-link {
    color: #0366d6;
    cursor: pointer;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.pl-content {
    overflow: hidden;
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 8px 8px 8px 0;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: var(--z-index-overlay);
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

/*set height of inputs according to their parents, needed for different input controll sizes*/
input.e-input,
.e-input-group input,
.e-input-group.e-control-wrapper input,
.e-input-group input.e-input,
.e-input-group.e-control-wrapper input.e-input {
    height: 100%
}

.e-input-group .e-input-group-icon, .e-input-group.e-control-wrapper .e-input-group-icon {
    min-height: 10px;
}

.e-splitter .e-split-bar.e-split-bar-vertical {
    margin: 0 !important;
}

div.login-dialog {
    display: grid;
    grid-template-columns: max-content max-content;
    grid-gap: 5px;
}

    div.login-dialog label {
        text-align: right;
    }

        div.login-dialog label:after {
            content: ":";
        }

.e-ddl.e-popup,
.e-datepicker.e-popup-wrapper {    
    border-width: 1px !important;
    border-style: solid !important;
    border-color: rgba(0, 0, 0, 0.15);
    box-shadow: 0 0 10px 10px rgba(0,0,0,.15);
}

.e-datepicker.e-popup-wrapper {
    border-color: #ababab !important;
    background-color: white !important;
}

.e-ddl.e-popup {
    overflow: hidden;
}

/*defaults for dialog and message boxes*/
.e-dialog.e-popup {
    width: auto;
    height: auto;
}

.e-dialog.e-lib.e-dlg-modal.e-draggable {
    max-height: 60% !important;
}

textarea.e-input, .e-input-group textarea, .e-input-group.e-control-wrapper textarea, .e-float-input textarea, .e-float-input.e-control-wrapper textarea {
    height: 100%
}

.e-input-group, .e-input-group.e-control-wrapper, .e-float-input, .e-float-input.e-control-wrapper {
    margin: 0 !important;
}

button.mud-button-root.mud-icon-button {
    outline: none !important;
}

.show {
    visibility: visible !important; /* show it no matter the which other css is on the object */
}

.enable {
    pointer-events: visible !important;
}

.hide {
    visibility: hidden !important;
}

.disable {
    pointer-events: none;
}

textarea.e-input,
.e-float-input textarea,
.e-float-input.e-control-wrapper textarea,
.e-input-group textarea,
.e-input-group.e-control-wrapper textarea {
    resize: none !important;
}

img {
    object-fit: scale-down;
}

.fade-in-opacity {
    visibility: visible;
    height: 20px;
    transition: all 0.5s ease;
}

.fade-out-opacity {
    pointer-events: none;
    visibility: hidden;
    height: 3px;
    transition: visibility 0s 2s, height 2s 0s ease;
}

.disable-pointer-events {
    pointer-events: none;
}

.e-toolbar, .e-toolbar .e-toolbar-items {
    background: none;
    border: none;
}

input.e-input, .e-input-group input.e-input, .e-input-group input, .e-input-group.e-control-wrapper input.e-input, .e-input-group.e-control-wrapper input, .e-float-input input, .e-float-input.e-input-group input, .e-float-input.e-control-wrapper input, .e-float-input.e-control-wrapper.e-input-group input, .e-input-group, .e-input-group.e-control-wrapper, .e-float-input, .e-float-input.e-control-wrapper {
    border-radius: 0;
    padding-left: 1px !important;
    padding-right: 1px !important;
}

    textarea.e-input, .e-input-group textarea.e-input, .e-input-group textarea, .e-input-group.e-control-wrapper textarea.e-input, .e-input-group.e-control-wrapper textarea, .e-float-input textarea, .e-float-input.e-input-group textarea, .e-float-input.e-control-wrapper textarea, .e-float-input.e-control-wrapper.e-input-group textarea {
        border-radius: 0;
    }

.e-accordion {
    border: none !important;
    border-radius: 0 !important;
}

    .e-accordion .e-acrdn-item {
        border: none !important;
        border-radius: 0 !important;
    }

        .e-accordion .e-acrdn-item > .e-acrdn-header {
            background: white !important;
            line-height: unset !important;
            height: auto;
        }

        .e-accordion .e-acrdn-item .e-acrdn-header {
            line-height: unset !important;
            height: auto;
        }

.e-acrdn-content {
    padding: 0 !important;
    border: none !important;
}

.e-acrdn-header-content {
    text-decoration: none !important;
}

.e-input-group-icon .e-date-icon .e-icons {
    border: none !important;
}

.e-sidebar.e-left {
    border: none;
    background-color: hsla(0,0%,100%,.8);
    box-shadow: 0 0 3px 0 rgba(0,0,0,.2) !important;
}

/*TODO investigate why it's not working inside the PlSidebar component'*/
.e-sidebar.e-right {
    position: absolute;
    overflow: initial !important;
    visibility: visible !important;
    border-color: #00355a !important;
    /*TODO to variable*/
    width: 300px !important;
}

.e-content.e-dropdownbase {
    padding: 0;
    max-height: 500px;
}

.e-dropdownbase .e-list-item {
    padding-right: 0
}

.e-combobox.e-popup-open {
    width: auto !important;
    height: auto !important;
}

.e-ccdlg {
    height: auto !important;
    min-height: 25% !important;
    max-height: unset !important;
    min-width: 350px !important;
}

.e-ccdlg .e-control.e-btn.e-ccdlg {
    min-width: 100% !important;
    margin-left: 0 !important;
}

.e-pane.e-pane-horizontal.e-scrollable {
    overflow: hidden !important;
}

.e-input-group, .e-input-group.e-control-wrapper, .e-float-input, .e-float-input.e-input-group, .e-float-input.e-control-wrapper, .e-float-input.e-input-group.e-control-wrapper {
    background: transparent;
}

/*splitter border*/
.e-splitter.e-splitter-horizontal, .e-splitter.e-splitter-vertical {
    border: none;
}

.e-splitter .e-split-bar.e-split-bar-horizontal.e-resizable-split-bar {
    margin: 0 3px !important;
    width: 3px !important;
}

/* Margin needed to not overlay a scrollbar above */
.e-splitter .e-split-bar.e-split-bar-vertical.e-resizable-split-bar {
    margin-top: 6px !important;
}

.e-splitter .e-split-bar.e-split-bar-horizontal.e-resizable-split-bar::after {
    width: 0 !important;
}

/*scroll settings*/
.e-content, .e-item {
    height: 100%;
}

.center-screen {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    min-height: 100vh;
    min-width: 100vw;
}

.bottom-right-screen {
    position: fixed;
    bottom: 0;
    right: 0;
    margin: 10px;
}

/*TODO this font sizes are defined in skin settings, we should take them from there in the correct places*/
.title {
    font-size: 10.5px !important;
}

/*TODO marked record color is defined in skin settings, we should take it from there*/
div.pl-marked, span.pl-marked, textarea.pl-marked {
    background-color: rgb(0, 191, 255) !important;
}

/*TODO marked record color is defined in skin settings, we should take it from there*/
.pl-sort-icon {
    color: rgb(50, 142, 206);
}

.e-input-group .e-input-group-icon, .e-input-group.e-control-wrapper .e-input-group-icon {
    min-width: 15px;
}

.e-contextmenu-container .e-contextmenu {
    max-height: 300px;
    overflow: auto;
}

/* remove border radius from listbox drop down icon */
.e-input-group .e-input-group-icon:last-child, .e-input-group.e-control-wrapper .e-input-group-icon:last-child {
    border: none;
}

/* correct overflow for markdown fields, also needed so have the scrollbar outside the markdown editor in this case
   which is important to get the correct focus behaviour (popout only opening when the actual editor was clicked not when
   the scrollbar was used)
*/
.pl-markdown {
    overflow: auto;
    height: 100%;
}

.e-dropdownbase .e-list-item {
    text-indent: 0;
}

/* default border for input, override mudblazor default styles */
input {
    border: 1px solid darkgrey;
}

.e-dropdownbase .e-list-item.e-item-focus {
    background-color: #fff !important;
}

.pl-context-menu {
    z-index: calc(var(--z-index-context-menu) + 5) !important;
}

.mark, mark {
    padding: 0;
    background-color: #ffea7d;
}

.mud-input-control>.mud-input-control-input-container>div.mud-input.mud-input-text,
.mud-picker .mud-input-control {
    margin-top: 0 !important;
}

.mud-dialog .mud-dialog-title {
    font-size: 16px;
    font-family: Asap, sans-serif;
}

.mud-dialog-content:has(.pl-dialog-module-content-wrapper) {
    display: flex;
}

.mud-dialog-content {
    font-size: 14px;
    font-family: Asap, sans-serif;
}

.insert-from-one-drive-dialog {
    width: 96vw;
    padding: 0;
    overflow: hidden;
}

/* At 1080px the picker renders its expanded sidebar and full localized titles; below, it falls back to its compact layout. */
@media (min-width: 1150px) {
    .insert-from-one-drive-dialog {
        width: 1080px;
    }
}

    .insert-from-one-drive-dialog .mud-dialog-content {
        padding: 0;
        margin: 0;
        overflow: hidden;
    }

    .insert-from-one-drive-dialog iframe {
        display: block;
        width: 100%;
        height: min(680px, 85vh);
        border: none;
    }

.pl-input-popover-container {
    outline: none !important;
    display: inline-flex;
    /* The visible chrome (border, background) of popover-based input DFs
       (listbox, text input, combobox, date input, ...) is painted here via the
       per-customizing .pl-symbol-{uid} class. Inheriting border-radius lets any
       parent .pl-df that sets a radius (e.g. .pl-flex-da ::deep .pl-df, 4 px)
       round the actually-bordered element instead of the invisible wrapper. */
    border-radius: inherit;
}

.pl-popover-input {
    height: 100%;
    width: 100%;
    background: none;
    text-indent: 0;
    box-sizing: border-box;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0;
    padding-right: 1px !important;
    border: 0 solid;
    border-radius: 0;
    box-shadow: none;
}

.pl-popover-input::selection {
    background: #007bff;
    color: #fff;
}

.pl-popover-icon {
    color: var(--color-popover-icon);
    font-family: 'Font Awesome 6 Pro';
    font-size: 14px;
    min-height: 10px;
    min-width: 15px;
    line-height: 1;
    display: flex;
    align-items: center;
    -ms-flex-align: center;
    flex-direction: column;
    -ms-flex-direction: column;
    justify-content: center;
    -ms-flex-pack: center;
    box-sizing: content-box;
    cursor: pointer;
    text-align: center;
    border-collapse: collapse;
    text-transform: none;
    white-space: nowrap;
    border: none;
}
    .pl-popover-icon::before {
        transition: 0.2s font-weight;
    }

    .pl-popover-icon.date-icon::before {
        content: "\f133";
        font-weight: lighter;
    }
    
        .pl-popover-icon.date-icon:hover::before {
            font-weight: 700;
        }

    .pl-popover-icon.ddl-icon:hover {
        background-color: var(--color-popover-icon);
    }
    
    .pl-popover-icon.ddl-icon::before {
        content: "\f0d7";
        font-weight: 700;
        font-size: 13px;
    }
    
        .pl-popover-icon.ddl-icon:hover::before {
            color: #fff;
        }

.input-focus,
.pl-focused-df .pl-textbox {
    box-shadow: 0 0 0 1px rgba(0,123,255,.25);
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

/* PWA adjustments when window controls overlay is active */
@media (display-mode: window-controls-overlay) {
    .pl-right-menu-group {
        margin-right: env(titlebar-area-inset-right, 250px);
        margin-top: env(titlebar-area-inset-top, -44px);
    }

    #header {
        padding-top: 10px !important;
    }

    .header-drag-bar {
        height: 23px !important;
    }

    .pl-toolbar-title {
        -webkit-app-region: drag;
    }
}

/* Search highlight styles */
.pl-search-highlight {
    background-color: var(--color-search-highlight, #ffff00);
    color: inherit;
}

/* Current match highlight - used for both single-match mode and as overlay in highlight-all mode */
.pl-search-highlight-current {
    background-color: var(--color-search-highlight-current, #90EE90); 
    color: inherit;
}

/* Override for when both classes are present (highlight-all mode) */
.pl-search-highlight.pl-search-highlight-current {
    background-color: var(--color-search-highlight-current, #90EE90) !important;
    color: inherit;
}

[class*="pl-symbol-"].pl-symbol-transparent {
    background-color: transparent !important;
}