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

div.nav-link {
    cursor: pointer;
}

div.nav-link:hover {
    background-color: rgba(255,255,255,0.1);
}

.page > .main {
    flex: 1;
    height: 100vh;
    width: 100vw;
}

.title {
    flex: 1;
}

.content {
    height: calc(100% - 3.5rem);
}

.button-container {
    padding-bottom: 10px;
}

.layout-component .modal {
    background: rgba(128, 128, 128, 0.75);
}

.layout-component .modal-header button {
    font-size: 2rem; /* For the close button 'X' */
    outline: none;
}

.layout-component .modal-body {
    padding: 0.5rem;
}

.layout-component .modal-dialog-scrollable > .modal-body {
    scrollbar-gutter: stable;
}

@media (min-width: 576px) {
    /* Extends and overrides the default css that ships with Blazor in modal.scss */
    .layout-component .modal-dialog-scrollable {
        position: absolute;
        top: 1.75rem;
        left: 1.75rem;
        min-height: calc(100% - 3.5rem);
        max-height: calc(100% - 3.5rem);
        min-width: calc(100% - 3.5rem);
        max-width: calc(100% - 3.5rem);
        padding: 1rem;
    }
}

.layout-component .modal-popup.fit-content .modal-dialog-scrollable {
    position: relative;
    min-width: unset;
    max-width: unset;
    left: unset;
    margin: auto;
    width: fit-content;
    max-height: unset;
    min-height: unset;
}

.searchbar button {
    margin-left: 5px;
}

.spinner {
    border: 16px solid silver;
    border-top: 16px solid rgb(0,112,150); /* NOV Blue */
    border-radius: 50%;
    width: 80px;
    height: 80px;
    animation: spin 700ms linear infinite;
    top: calc(50% - 40px);
    left: calc(50% - 40px);
    position: relative;
    display: inline-block;
}

@keyframes spin {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(360deg)
    }
}


.context-menu {
    font-size: 0.8rem;
}

    .context-menu ol {
        position: absolute; /* Absolute position from the containing ancestor (the div.context-menu) */
        z-index: 1;
        list-style: none;
        padding: 0px 3px 0px 3px;
        background-color: #fff;
        border: solid 1px #ccc;
        display: none; /* hides sublists */
    }

    .context-menu .menu-item {
        display: block;
        position: relative;
        line-height: 28px;
        width: 150px;
        text-indent: 3px;
        color: #212529;
    }

        .context-menu .menu-item.with-sub-menu:after {
            float: right;
            content: '▶';
        }

        .context-menu .menu-item:hover {
            background-color: #1b6ec2;
            color: white; /* highlights current hovered list item and the parent list items when hovering over sub menues */
        }

            .context-menu .menu-item:hover ol ol {
                display: none; /* hides sub-sublists */
            }

            .context-menu .menu-item:hover ol {
                display: block; /* shows sublist on hover */
                color: black;
            }

                .context-menu .menu-item:hover ol.sub-menu-content {
                    display: block; /* shows sub-sublist on hover */
                    margin-left: 150px; /* this should be the same width as the parent list item */
                    margin-top: -28px; /* aligns top of sub menu with top of list item */
                }

form,
.layout-component {
    display: block;
    font-size: 0.8rem;
}

    .layout-component.separator-hr {
        border-top: 1px solid black;
        margin-top: 0.5rem;
        margin-bottom: 0.5rem;
    }

    .layout-component.separator-vr {
        border-left: 1px solid black;
        margin-left: 0.25rem;
        margin-right: 0.25rem;
    }

    .layout-component .float-right {
        margin-left: auto;
    }

    .layout-component.control-group .group-header {
        padding-bottom: 10px;
        font-weight: 600;
    }

    .layout-component.control-group .group-content {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 1px;
    }

    .layout-component.control-group .group-content > button {
        width: fit-content;
    }

    .layout-component.tab-control {
        margin: 3px;
    }

    .layout-component.tab-content {
        outline-style: solid;
        outline-color: rgb(0,112,150); /* NOV Blue */
        padding: 6px;
        border-radius: 4px;
    }



.layout-component button {
    border-style: none;
    font-size: 0.8rem;
}

.layout-component button.btn-sm {
    white-space: nowrap;
}
    
.layout-component button:focus {
    border-style: none;
}

.layout-control {
    display: block;
    max-width: 394px;
    min-height: 25.19px;
    margin-bottom: 0.25rem;
}

    form label, 
    .layout-control label {
        width: 12rem;
        vertical-align:top;
        margin-bottom: 0;
        margin-right: 10px;
        text-wrap: wrap;
    }

    form input.uppercase {
        text-transform: uppercase;
    }

    .layout-control .feature-messages {
        background: lightgray;
        width: 10rem;
        padding: 3px;
        border: 1px solid;
        border-radius: 2px;
        margin-bottom: 3px;
    }

.layout-control .sketch img {
    display: block;
    margin: auto;
}

.layout-control > .checkbox,
.layout-control > .radiobuttons,
.layout-control > .textbox,
.layout-control > .textarea,
.layout-control > .combobox {
    display: inline-block;
    width: 12rem;
}

.layout-control .radiobuttons input {
    width: unset;
}

.layout-control .radiobuttons .choices {
    white-space: nowrap;
    width: 12rem;
}

.layout-control .currency,
.layout-control .delivery {
    display: inline-block;
}

    form input,
    form textarea,
    .layout-control .textbox input,
    .layout-control .combobox input,
    .layout-control .currency input,
    .layout-control .delivery input,
    .layout-control .textarea textarea {
        width: 10rem;
    }

    .layout-control .combobox div.button-spacer {
        width: 25px;
        display: inline-block;
    }

    .layout-control > .textbox > .modal-popup {
        display: inline;
    }

    .layout-control > .checkbox input {
        vertical-align: middle;
        width: unset;
    }

    .layout-control .textarea textarea {
        min-height: 4rem;
        scrollbar-gutter: stable;
    }

    .scrollable {
        overflow-y: scroll;
        scrollbar-gutter: stable;
    }

        .scrollable .slave-btn > button {
            /* Positioned for slightly narrower controls that allow for the scrollbar width */
            margin-left: calc(10rem - 17px);
        }

        .scrollable .checkbox,
        .scrollable .radiobuttons,
        .scrollable .textbox,
        .scrollable .combobox,
        .scrollable .currency,
        .scrollable .delivery,
        .scrollable .textarea {
            /* Slightly narrower controls to allow for the scrollbar width */
            width: calc(12rem - 17px);
        }

            .scrollable .radiobuttons .choices,
            .scrollable .textbox input,
            .scrollable .combobox input,
            .scrollable .textarea textarea,
            .scrollable .feature-messages {
                /* Slightly narrower controls to allow for the scrollbar width */
                width: calc(10rem - 17px);
            }

    .layout-control .currency select,
    .layout-control .delivery select {
        width: 6rem;
        padding: 3.095px; /* Makes the select box the same height as an input box (Chrome = 3.095px, other browsers TBC) */
    }

    .layout-control .narrow .textbox input {
        width: 4rem;
    }

.layout-control.w100pc > .checkbox,
.layout-control.w100pc > .textbox,
.layout-control.w100pc > .combobox {
    width: 100%;
}

    .layout-control.w100pc > .textbox > input {
        width: 100%;
    }

    .layout-control.w100pc > .combobox > input,
    .layout-control.w100pc > .combobox > input,
    .layout-control.w100pc > .textbox.with-button > input {
        width: calc(100% - 25px);
    }

.group-content > .layout-control.nolabel input,
.group-content > .layout-control.nolabel textarea,
.group-content > .layout-control.nolabel .feature-messages {
    width: 100%;
}

.layout-control .radiobuttons input.choice {
    outline: unset;
}

.layout-control .radiobuttons label.choice {
    outline: unset;
}

    .layout-control .radiobuttons label.choice.constrained,
    .layout-control .radiobuttons label.choice.invalid {
        color: GrayText;
    }

    .layout-control .radiobuttons label.choice.current.constrained {
        color: black;
        outline: 1px solid yellow;
        background-color: yellow;
    }

    .layout-control .radiobuttons label.choice.current.invalid {
        color: white;
        outline: 1px solid red;
        background-color: red;
    }

.layout-control.radiobuttons-horizontal {
    display: flex;
    margin-top: 6px;
}
        .layout-control.radiobuttons-horizontal .radiobuttons {
            display: inline-block;
            width: unset;
        }

        .layout-control.radiobuttons-horizontal .choices {
            display: flex;
            width: unset;
        }

            .layout-control.radiobuttons-horizontal .choices label,
            .layout-control.radiobuttons-vertical .choices label {
                width: unset;
                margin-left: 6px;
                margin-right: 12px;
            }

    .layout-control .feature.null {
        background: violet;
    }

    .layout-control .feature.value-invalid {
        background: red;
        color: white;
    }

    .layout-control .feature.value-constrained {
        background: yellow;
    }

.layout-control .feature.readonly {
    cursor: default;
    color: black;  
    background-color: rgba(239, 239, 239, 0.3);
    border: 1px solid rgba(118, 118, 118, 0.3);
    
}

    .layout-control .textbox,
    .layout-control .combobox{
        /* Relative position ensures that the context menu or dropdown list follows the control when scrolling */
        position: relative;
    }

    .layout-control .combobox > button.oi-caret-bottom:before {
        /* a skinnier caret symbol than the open iconic one  */
        content: '▼';
        position: relative;
        top: -1px;
    }

    .layout-control .combobox-list {
        position: absolute;
        z-index: 999;
        top: 100%;
        left: 0;
        right: 0;
        margin: 0;
        min-width: 10rem;
        width: fit-content;
        max-height: 20rem;
        text-indent: 3px;
        white-space: nowrap;
        overflow: scroll;
        padding: 0px 3px 0px 3px;
        list-style: none;
        border: 1px solid #ccc;
        background-color: #fff;
    }

        .layout-control .combobox-list .choice.default {
            background-color: #1ba156;
            color: white;
        }

        .layout-control .combobox-list .choice.current {
            font-weight: 700;
        }

        .layout-control .combobox-list .choice.constrained {
            background-color: yellow;
        }

        .layout-control .combobox-list .choice.invalid {
            outline: unset;
            background-color: red;
            color: white;
        }

        .layout-control .combobox-list .choice:hover {
            background-color: Highlight;
            color: white;
        }

.design-messages .header {
    display: block;
    word-break: break-word;
    white-space: normal;
    border: 1px solid;
    border-radius: 5px;
    padding: 0 10px 0 10px;
    margin: 0 0 4px 0;
    padding-bottom: 6px;
}

.design-messages .header-alert {
    background: #fff8f7;
    border-color: #d04437;
}

.design-messages .header-warning {
    background: #fffdf6;
    border-color: #ff9633;
}

.design-messages .header-info {
    background: #d6e5ff;
    border-color: #77a9ff;
}

.design-messages .message {
    font-weight: normal;
}

table.quickgrid {
    table-layout: fixed;
    width: 100%;
}

/* Column Widths For Fixed Layout Tables */
col.col-2pc,
th.col-2pc {
    width: 2%;
}

col.col-5pc,
th.col-5pc {
    width: 5%;
}

col.col-8pc,
th.col-8pc {
    width: 8%;
}

col.col-9pc,
th.col-9pc {
    width: 9%;
}

col.col-10pc,
th.col-10pc {
    width: 10%;
}

col.col-11pc,
th.col-11pc {
    width: 11%;
}

col.col-13pc,
th.col-13pc {
    width: 13%;
}

col.col-14pc,
th.col-14pc {
    width: 14%;
}

col.col-15pc,
th.col-15pc {
    width: 15%;
}

col.col-16pc,
th.col-16pc {
    width: 16%;
}

col.col-18pc,
th.col-18pc {
    width: 18%;
}

col.col-20pc,
th.col-20pc {
    width: 20%;
}

col.col-24pc,
th.col-24pc {
    width: 24%;
}

col.col-25pc,
th.col-25pc {
    width: 25%;
}

col.col-30pc,
th.col-30pc {
    width: 30%;
}

col.col-50pc,
th.col-50pc {
    width: 50%;
}

col.col-75pc,
th.col-75pc {
    width: 75%;
}

.quickgrid th {
    padding: 12px 0 12px 0;
}

.quickgrid tr {
    height: 2rem;
}

.quickgrid td {
    vertical-align: middle;
    white-space: nowrap;
    overflow: hidden;
}

.quickgrid[theme=default] .filtered .col-options-button,
.quickgrid[theme=default] .filtered .col-options-button:hover,
.quickgrid[theme=default] .filtered .search-box input {
    background-color: yellow;
}

.quickgrid .search-box {
    width: 300px;
    max-height: 250px;
    overflow-y: scroll;
    overflow-x: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* General icon buttons */
button.oi {
    width: 25px;
    line-height: 19.2px;
    font-size: 12.8px;
    word-spacing: 9.1px; /* makes the button width approximately equal to the dropdown list caret */
    padding-block-start: 1px;
    padding-block-end: 1px;
    padding-inline-start: 6px;
    padding-inline-end: 6px;
}

/* Magnifying glass */
button.magnifier,
.quickgrid th .col-options-button {
    background: center center / 1rem no-repeat;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /> </svg>') !important;
}

.col-options .searchbar > input {
    width: calc(100% - 120px);
}