﻿.open-layout-modal {
    width: 100%;
    height: 100%;
    min-width: 300px;
    min-height: 300px;
}

    .open-layout-modal button{
        margin-top:7px;
    }

    /* Fix weird hovered menu item highlighting */
    .open-layout-modal .dropdown-menu > li > a,
    .open-layout-modal .dropdown-menu > li > a:hover {
        background-color: transparent;
    }

    .open-layout-modal .dropdown-menu > li:hover {
        background-color: #edf7ff;
    }

    .open-layout-modal .dropdown-menu > li:not(.divider){
        padding: 4px 0;
    }

    .open-layout-modal .dropdown-menu .divider {
        margin: 0;
    }


.open-layout-modal .dropdown-menu {
    padding: 0;
}
    .open-layout-modal .layout-options-menu{
        width:initial;
    }


    .open-layout-modal .layout-list-rows {
        border: 1px solid #ababab;
        height: 266px;
        overflow-y: auto;
        cursor: pointer;
    }


.open-layout-modal .input-group {
    width: 100%
}

    .open-layout-modal .no-layouts-message {
        margin-top: 12px;
    }


.layout-list-row {
    padding: 5px;
    border-bottom: 1px solid #ababab;
    background-color: white;
    color: black;
    display: grid;
    grid-template-columns: 1fr max-content;
}

    .layout-list-row:hover {
        background-color: #edf7ff;
    }

.layout-list-row-is-selected,
.layout-list-row-is-selected:hover {
    background-color: #d9edff !important;
}

.layout-list-row-dirty .fa-floppy-disk {
    color: red;
}

    .layout-list-row-dirty .fa-floppy-disk:hover {
        color: red !important;
    }

.layout-list-row-buttons i {
    cursor: pointer;
}

.layout-list-row-context {
    color: #666;
    font-size: 11px;
    cursor: pointer;
}

.new-layout-selected .layout-list-row-context {
    color: #dadada;
}

.layout-list-row-title {
    text-overflow: ellipsis;
    cursor: pointer;
}

.layout-list-row-buttons {
    display: grid;
    text-align: center;
    align-content: center;
    grid-auto-flow: column;
    gap: 10px;
}

    .layout-list-row-buttons div {
        display: flex;
        align-items: center;
    }

.layout-list-row:hover .layout-list-row-buttons i {
    display: initial;
}

.layout-side-menu-header {
    padding: 5px;
    border: 1px solid darkgray;
    background-color: lightgray;
    color: black;
    font-weight: bold;
    align-content: center;
    display: grid;
    grid-template-columns: 1fr min-content;
}

.layout-options-menu {
    left: auto;
    right: 0;
    min-width: 100px;
    white-space: normal;
}
