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

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

.e-control {
    font-family: Roboto !important;
}

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

    body:has(.moving) {
        -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;
}

app {
    position: relative;
    display: flex;
    flex-direction: column;
}

.top-row {
    height: 3.5rem;
    display: flex;
    align-items: center;
}

.main {
    flex: 1;
}

    .main .top-row {
        background-color: #f7f7f7;
        border-bottom: 1px solid #d6d5d5;
        justify-content: flex-end;
    }

        .main .top-row > a, .main .top-row .btn-link {
            white-space: nowrap;
            margin-left: 1.5rem;
        }

        .main .top-row a:first-child {
            overflow: hidden;
            text-overflow: ellipsis;
        }

.sidebar {
    background: #f7f7f7;
}

    .sidebar .top-row {
        background-color: rgba(0,0,0,0.4);
    }

    .sidebar .navbar-brand {
        font-size: 1.1rem;
    }

    .sidebar .oi {
        width: 2rem;
        font-size: 1.1rem;
        vertical-align: text-top;
        top: -2px;
    }

    .sidebar .nav-item {
        font-size: 0.9rem;
        padding-bottom: 0.5rem;
    }

        .sidebar .nav-item:first-of-type {
            padding-top: 1rem;
        }

        .sidebar .nav-item:last-of-type {
            padding-bottom: 1rem;
        }

        .sidebar .nav-item a {
            color: #d7d7d7;
            border-radius: 4px;
            height: 3rem;
            display: flex;
            align-items: center;
            line-height: 3rem;
        }

            .sidebar .nav-item a.active {
                background-color: rgba(255,255,255,0.25);
                color: white;
            }

            .sidebar .nav-item a:hover {
                background-color: rgba(255,255,255,0.1);
                color: white;
            }

.pl-content {
    overflow: hidden;
}

.navbar-toggler {
    background-color: rgba(255, 255, 255, 0.1);
}

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

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

@media (max-width: 767.98px) {
    .main .top-row:not(.auth) {
        display: none;
    }

    .main .top-row.auth {
        justify-content: space-between;
    }

    .main .top-row a, .main .top-row .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 768px) {
    app {
        flex-direction: row;
    }

    .sidebar {
        width: 350px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .main .top-row {
        position: sticky;
        top: 0;
    }

    .main > div {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .navbar-toggler {
        display: none;
    }

    .sidebar .collapse {
        /* Never collapse the sidebar for wide screens */
        display: block;
    }
}

/*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;
}

:root {
    --accent: red;
    --primary: red;
}

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

    .fade-in-opacity:hover {
        height: 40vh;
        min-width: 60vw;
        max-width: 100vw;
        overflow-y: auto;
        transition: all 2s 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;
}

.scale-context-menu .e-contextmenu {
    box-shadow: 0 0 11px rgba(0, 0, 0, 0.5) !important;
    min-width: 170px;
}

.scale-context-menu .e-menu-item {
    padding: 2px 11px !important;
    height: auto !important;
    line-height: inherit !important;
    font-family: 'Roboto', sans-serif;
}

.scale-context-menu.e-contextmenu-wrapper ul .e-menu-item,
.scale-context-menu.e-contextmenu-container ul .e-menu-item {
    cursor: pointer;
    position: relative;
    height: auto;
    padding: 1px 10px;
}

.scale-context-menu.e-contextmenu-wrapper.e-sfcontextmenu ul,
.scale-context-menu.e-contextmenu-container.e-sfcontextmenu ul {
    padding: 8px 0 8px 0;
    box-shadow: 0 0 14px 5px rgba(0, 0, 0, 0.35);
}

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

.pl-global-search-overlay {
    background: rgba(0, 55, 91, 0.20);
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
}

.pl-popover {
    z-index: 99999 !important;
}

.mud-popover-anchor-top-left.pl-listbox-popover > div,
.mud-popover-anchor-top-right.pl-listbox-popover > div {
    margin-top: -100% !important;
}

.pl-global-search-popup {
    top: 62px !important;
    left: 50% !important;
    z-index: 15001 !important;
}

.e-dlg-container.e-dlg-center-center {
    z-index: 1500 !important;
}

.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-content {
    margin: 0 !important;
    padding: 20px 24px !important;
}

.mud-dialog .mud-dialog-title, .mud-dialog .mud-dialog-actions {
    padding: 24px;
}

.mud-dialog .mud-dialog-title {
    padding-bottom: 20px;
}

.mud-dialog .mud-dialog-actions {
    padding-top: 20px;
}

.mud-dialog-title, .mud-dialog-content {
    border-bottom: 1px solid #DEE2E6;
}