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

html, body {
    font-family: Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 12px;
    height: 100%;
}

body {
    background-image: url("../icons/planta_background_02.svg");
    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 {
    padding-top: 4px;
    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: 0rem !important;
        padding-right: 0rem !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-grid .e-detailcell {
    padding: 0px;
}

.e-splitter .e-split-bar.e-split-bar-vertical {
    margin: 0px !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-grid .e-table {
    width: 100% !important;
}

.e-grid {
    /*    display: inline-block;
    width: fit-content;
    height: fit-content;*/
    border: none;
}

    .e-grid .e-rowcell, .e-grid-min-height .e-grid-height .e-rowcell {
        padding: 0px;
        position: relative;
    }

    .e-grid .e-content {
        /*overflow-x: hidden;*/
    }

    .e-grid .e-gridheader {
        border: none;
    }

    .e-grid .e-detailcell {
        border: none;
    }

    .e-grid .e-rowcell {
        border: none;
    }

    .e-grid.e-default tr td:first-child {
        border: none;
    }

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

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: 0px !important;
}

.e-detailrow {
    border: none;
}

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

    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: 0px !important;
}

    .e-accordion .e-toggle-icon {
        visibility: hidden;
    }

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

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

            .e-accordion .e-acrdn-item > .e-acrdn-header:hover {
                background-color: #00AEEF !important;
            }

        .e-accordion .e-acrdn-item.e-selected.e-select > .e-acrdn-header {
            border-radius: 0px;
        }

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

.e-acrdn-header-content {
    text-decoration: 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: 0px;
    max-height: 500px;
}

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

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

/* gantt adjust table content for missing borderes so it matches the bars, does not work inside component specific css */
.sf-gantt .e-gridcontent {
    margin-top: 3px;
}

.e-gantt-manualparenttaskbar, .e-gantt-manualparenttaskbar-left, .e-gantt-manualparenttaskbar-right {
    background: transparent !important;
}

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

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

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

.e-grid, .e-grid .e-rowcell, .e-grid .e-headercelldiv {
    font-size: 11px;
}

    .e-grid .e-headercell {
        height: 20px !important;
        font-weight: normal !important;
    }

    .e-grid .e-headercelldiv {
        font-weight: normal !important;
    }

    .e-grid .e-detailheadercell {
        height: 20px;
    }

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

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