/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification
for details on configuring this project to bundle and minify static web assets. */

a.navbar-brand {
    white-space: normal;
    text-align: center;
    word-break: break-all;
}

/* Provide sufficient contrast against white background */
a {
    color: #0366d6;
}

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

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.border-top {
    border-top: 1px solid #e5e5e5;
}

.border-bottom {
    border-bottom: 1px solid #e5e5e5;
}

.box-shadow {
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

button.accept-policy {
    font-size: 1rem;
    line-height: inherit;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
    position: relative;
    min-height: 100%;
}

body {
    /* Margin bottom by footer height */
    margin-bottom: 60px;
    margin-left: 0;
}

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    white-space: nowrap;
    line-height: 60px; /* Vertically center the text there */
}

/* Error Notification Css

    See Assets/Typescript/GUI/ErrorNotifier.ts
*/

.notifyBox {
    position: fixed;
    height: 5%;
    width: 30%;
    left: 35%;
    right: 35%;
    bottom: 2%;
    border-style: solid;
    border-width: 1px;
    border-radius: 5%;
    overflow-y: scroll;
}

.notifyBoxError {
    background-color: indianred;
    border-color: darkred;
}

.notifyBox .notifyText {
    text-align: center;
}

.notifyBoxError .notifyTextError {
    color: black;
}

/* Sorting Header Css

    See Assets/Typescript/GUI/Tables/TableSort.ts
*/

.selectSortHeader {
    color: darkblue;
}

.indicatorSortHeader {
    display: inline;
}

/* Popup Css

    See Assets/Typescript/GUI/Popup.ts
*/

.popupGreyBox {
    background-color: #77777780;
}

.popupContentBox {
    background-color: white;
    padding: 2% 2% 3% 2%;
    border-style: solid;
    border-radius: 5%;
}

.popupContextBoxMaxSize {
    position: fixed;
    left: 0px;
    top: 0px;
    overflow-y: scroll;
    max-height: 100vh;
    max-width: 100vh;
}

/* Quick Edit Table Css

    See Assets/
*/
.editable-column-cell {
}

.not-editable-column-cell {
    background-color: lightgrey
}

.expand-editable-column-cell {
    z-index: 80;
    position: absolute;
    left: 10%;
    top: 10%;
    height: 80%;
    width: 80%;
}

/* Bootstrap changes */
.table > thead > tr, .table > thead > tr > th {
    border-collapse: separate;
    border-spacing: 0;
    z-index: 9;
}


.table > thead {
    position: sticky;
    top: 0;
    background-color: white;
    z-index: 8;
}

.text-break, .kvsetting-Value, .kvsetting-Value > * {
    min-width: 10em;
    word-break: break-all
}

    /* Other Changes */
    .large-text-content-cell, .kvsetting-Value > * {
        overflow-y: auto;
        min-width: 10em;
        max-height: 35em;
    }

/* Mobile Table
    See /Assets/Typescript/GUI/Tables/MobileTable.ts
*/
.table-mobile > thead {
    display: none;
}

table.table-mobile > tbody > tr > td, table.table-mobile > tbody > tr > div {
    display: none;
}

    table.table-mobile > tbody > tr > td:first-of-type {
        display: block;
        background-color: lightblue;
    }

table.table-mobile > tbody > tr:hover > td, table.table-mobile > tbody > tr:hover > div, table.table-mobile > tbody > tr:focus-within > td, table.table-mobile > tbody > tr:focus-within > div {
    display: block;
}

table.table-mobile > tbody > tr > div {
    background-color: #f8f8f8;
}

    table.table-mobile > tbody > tr > div:first-of-type {
        display: none;
    }

/* Folder Structure User Edit
    See /Assets/Typescript/GUI/HeirarchicalFormEntries.ts
*/


.hfe-folder {
    background-color: lightyellow;
    display: inline-block;
}

.hfe-file {
    background-color: lightblue;
    display: inline-block;
}

.hfe-container {
    overflow-y: scroll;
}

/* Filter Button
    See /Assets/Typescript/GUI/Tables/FilterButton.ts
*/
.filter-label {
    padding-right: 1%;
    display: inline;
    min-width: 5em;
}

.filter-input-element {
    display: inline;
    min-width: 6em;
}

.filter-checkbox {
    display: inline;
}

.filter-option-container {
    display: grid;
    grid-template-columns: 33% 33% 33%;
    padding-top: .5%;
    padding-bottom: .5%;
}

.filter-container {
    border-style: solid;
    border-color: lightgrey;
    border-radius: 10px;
    display: grid;
    text-align: left;
    grid-template-columns: 50% 50%;
}

/* AccountInfoWidget
    See /Assets/Typescript/Account/AccountInfoWidget.ts
*/

.account-info-widget-display-name {
    display: inline;
}

.account-info-widget-profile-picture {
    display: inline;
    height: 2em;
    padding: 4%;
}

@media only screen and (max-width: 900px) {
    .filter-container {
        grid-template-columns: 100%;
    }

    .account-info-widget-display-name {
        display: none;
    }

    .account-info-widget-profile-picture {
        display: none;
    }
}

/*
    Home Content
*/
.home-section {
    margin: 3em;
}


.vault-json {
    background-color: #f1807e; 
}
.servicediscovery-json {
    background-color: #a9eff5; 
}

.kv-overlay-cell {
    position: relative; /* Needed for positioning the overlay text */
    color: transparent;
}

.kv-overlay-cell::before {
    content: "🔒";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.9; /* Adjust the opacity level here */
    color: black;
    background-color: rgba(255, 255, 255, 0.5); /* Optional: Add a background color with opacity */
    padding: 5px;
    pointer-events: none; /* Ensures the overlay text doesn't interfere with cell content interaction */
}