/*
        INDEX:
    ----------------
    - main styles
    - wrapper
    - left panel
    - right panel - filter (top) panel
    - right panel - data (bottom) panel
    - login form
*/

/*------------ MAIN STYLES -------------*/
body,
html {
    padding: 0;
    margin: 0;
    overflow: hidden;
    font-size: 16px;
}

:root {
    --connection-panel-main: rgb(36, 39, 46);
    --connection-panel-secondary: rgb(24, 26, 31);
    --connection-list-text: rgb(228, 228, 228);
    --filter-panel: rgba(231, 231, 231, 0.801);
    --list-hightlight: rgba(25, 135, 84, 0.5);
    --list-hightlight-hover: rgba(72, 110, 93, 0.3);
    --document-edit-highlight: rgba(211, 211, 211, 0.2);
}

button:disabled {
    opacity: 20% !important;
}

/*------------ MAIN WRAPPER (2 col. layout) -------------*/
.wrapper {
    display: grid;
    grid-template-columns: 20% 80%;
}

/*------------ LEFT(CONNECTIONS) PANEL -------------*/
.leftColumn {
    display: grid;
    grid-template-rows: 14% 86%;
    grid-template-areas: ".", ".";
    background-color: var(--connection-panel-main);
    height: 100vh;
    /* overflow-y: scroll; */
}

.connectionList {
    color: white;
    height: 100%;
    width: 100%;
    overflow: hidden;
    overflow-y: scroll;
    padding: 0.5em 0 0.5em 0;
}

.connectionListItem {
    width: 100%;
    margin: 0.0125em 0 0.125em 0;
}

/* Designing for scroll-bar */
.connectionList::-webkit-scrollbar {
    width: 6px;
    visibility: none;
}

.listItemHeader {
    margin-left: 0.25em;
}

.listItemBody li:hover,
.listItemHeader:hover {
    background-color: var(--list-hightlight-hover);
}

.listItemBody,
.listItemHeader {
    cursor: pointer;
    user-select: none;
    width: 100%;
    padding: 0;
}

.highlight {
    background: var(--list-hightlight);
}

.listItemBody {
    list-style-type: none;
    margin: 0.1em;
}

.listItemBody li {
    margin: 0;
    padding-left: 2em;
    width: 100%;
}

.icon {
    margin: 0 0.5em;
    font-size: 1.25em;
}

.host,
.hostHeader {
    color: var(--connection-list-text);
    cursor: pointer;
    margin: 0;
    font-size: 1.25vw;
}

.hostHeader {
    font-size: 1vw;
}

.connectionDetails {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: var(--connection-panel-secondary);
    width: 100%;
    overflow: hidden;
    padding: 2em;
    /* box-shadow: 0.25rem 0.25rem 0.5rem black; */
    word-break: break-word;
}

.collapsed {
    display: none;
}

/*------------ RIGHT(DATA) PANEL -> FITLERING PANEL (Note only shows when in documents view)-------------*/
.filterPanel {
    /* panel above data view with search bar */
    background: var(--filter-panel);
    padding: 0.25em 0.5em;
    min-height: 20%;
    box-shadow: 0.25rem 0.25rem 0.5rem black;
}

.filterPanel-body {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.filterPanel button {
    margin: 0 0.25em;
}

/* .totalDocs {
    margin: 1em 0 0.25em 0;
    float: right;
} */

.addData {
    margin-right: 2em !important;
    /* prevents the btn text from breaking on rezise */
    white-space: nowrap;
}

.filterForm {
    height: fit-content !important;
    display: flex;
    flex-grow: 1;
}

.filterInput {
    margin: 0 0.25em 0 0;
    max-width: 75%;
    min-width: 55%;
}

.filterInput:focus {
    box-shadow: 0 0 0 0.25rem #6c757d73;
    outline: 0;
    border: 0;
}

.pagination-container,
.totalDocs {
    margin-right: 0.25em;
}

.pagination-container ul {
    margin: 0 !important;
}

.pagination-container button {
    background-color: var(--bs-gray);
    color: white;
    cursor: pointer;
    margin: 0;
}

.page-link:hover {
    background-color: #5c636a;
    color: white;
}

.prevPage:focus,
.nextPage:focus {
    box-shadow: none;
    background-color: #5c636a;
    color: white;
}

/*  makes it so the button can't be hightlighted */
.prevPage,
.nextPage {
    user-select: none;
}

.prevPage {
    /* 'previous' pagination btn */
    border-top-left-radius: 0.25em;
    border-bottom-left-radius: 0.25em;
}

.pagination p {
    /* position: relative;
    top: 25%; */
    margin: 0 0.75em;
    text-align: center;
    font-size: 0.85em;
}

/* this only shows in db and collection views */
.rightColumnHeader {
    background: var(--filter-panel);
    padding: 1em;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    box-shadow: 0.25rem 0.25rem 0.5rem black;
}

.rightColumnHeader h3 {
    margin-left: 0.75em;
}

/*------------ RIGHT(DATA) PANEL -> DATA PANEL (BOTTOM) -------------*/
.rightColumn {
    height: 100vh;
    display: grid;
    grid-template-rows: 14% 86%;
    height: 100vh;
}

.document {
    width: 97%;
    background-color: white;
    margin: 0.25em;
    padding: 0.5em;
    border-radius: 2px;
}

.documentObjectOutput {
    position: relative;
    width: 100% !important;
}

/* .objectDataDiv .documentObjectOutput div {
    padding-left: 0.5em;
} */

.dataWrapper {
    /* margin-top: 1em; */
    /* padding: 0 0 0 2em !important; */
    position: relative;
    margin-left: 1em;
}

.editModeDataWrapper {
    /* margin-top: 1em; */
    /* padding: 0 0 0 2em !important; */
    position: relative;
    z-index: 0;
}

.placeholderDocIcon {
    opacity: 0;
    pointer-events: none;
}

.objectDataDiv .docIcon {
    left: 0;
}

.placeholderDocIcon,
.docIcon {
    position: relative;
    left: 0.55em;
}

.dataWrapper div>div,
.dataWrapper p {
    padding: 0 0 0 2em;
}

.editModeDataWrapper div>div,
.editModeDataWrapper p {
    padding: 0 0 0 2em;
}

.inactiveDocument {
    width: 97%;
    background: rgba(131, 131, 131, 0.438);
    color: rgb(131, 131, 131);
    margin: 0.25em;
    padding: 0.5em;
    border-radius: 2px;
}

.inactiveDocument span {
    color: rgb(131, 131, 131) !important;
}

.keySpan {
    /* for margin beside key in document */
    margin-right: 0.275em;
}

.stringDataDiv {
    width: 75%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    margin: 0.125em 0;
}

.stringDataDiv textarea {
    border: none;
    overflow: hidden;
    outline: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    line-height: 1;
    resize: none;
    z-index: 1;
    width: 100%;
}

.inactiveDocument textarea {
    background-color: rgba(0, 0, 0, 0);
    color: rgb(131, 131, 131) !important;
    resize: none;
}

.hoveredStringPopup {
    width: 80%;
    height: 100%;
    position: absolute;
    top: 4em;
    left: -0.75em;
    padding: 0.15em !important;
    background-color: rgb(37, 38, 49);
    color: rgb(255, 255, 255);
    font-size: 0.75em;
    border: thin solid rgb(200, 200, 200);
    z-index: 9;
    box-sizing: border-box;
}

.hoveredOverflowTextarea {
    color: white;
    background-color: rgba(0, 0, 0, 0);
    white-space: pre;
    height: 100%;
}

.objectDataDiv {
    position: relative;
}

.document:first-of-type {
    margin-top: 0.75em;
}

.document:last-of-type {
    margin-bottom: 0.75em;
}

.dbPanel,
.colPanel,
.hostPanel {
    width: 100%;
    background-color: white;
    margin: 0.25em 0;
    padding: 2em 1em;
    cursor: pointer;
}

.connectionPanel {
    background-color: #cfcfcf;
    width: 100%;
    padding: 1em 1em;
}

.connectionPanel:hover {
    background-color: #afafaf;
}

.instancePanel {
    width: 100%;
    cursor: pointer;
}

.rightColumnDataView {
    background: var(--filter-panel);
    display: flex;
    align-items: center;
    flex-direction: column;
    min-height: 80%;
    overflow-y: auto;
    overflow-x: hidden;
}

.expandDocument {
    background: var(--bs-gray);
    color: white;
    border-radius: 4px;
    width: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    display: inline;
}

.placeholderIcon {
    visibility: hidden;
}

.editInputDiv {
    /* width: 100%; for dropwdown positioning */
    position: relative;
    width: 100% !important;
    margin: 0.3em 0 !important;
    display: flex;
    flex-direction: row;
    /* align-items: center; */
    min-height: 2em;
}

.docOptionsDiv,
.docInputsDiv,
.hoveredRecordOptions,
.editInputOverlay {
    padding: 0 !important;
}

.hoveredRecordOptions {
    flex: 2;
    position: absolute;
    /* position was slightly outside the record hover highlight */
    left: 3px;
    margin-right: 0.5em !important;
}

.docOptionsDiv {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.docOptionsDiv svg {
    margin-left: 2em;
}

.docInputsDiv {
    flex: 3;
    max-width: 85%;
    margin-left: 0.5em;
    display: flex;
    align-items: center;
}

.docInputsDiv .recordSeparator {
    margin-right: 0.1em;
}

.addFieldBtn {
    /* this is different from padding on delete button but content inside makes them different widths if padding is same */
    padding: 0 0.185em;
    outline: grey solid 0.025em;
    border-radius: 5px;
    color: rgba(128, 128, 128, 0.664);
    cursor: pointer;
    user-select: none;
    margin-left: 0.25em;
}

.deleteFieldBtn {
    padding: 0 0.25em;
    outline: grey solid 0.025em;
    border-radius: 5px;
    color: rgba(128, 128, 128, 0.664);
    cursor: pointer;
    user-select: none;
}

.addRecordOptionsDiv {
    position: absolute;
    display: flex;
    flex-direction: column;
    box-shadow: -1px 3px 0.5em rgba(0, 0, 0, 0.514);
    width: fit-content;
    padding: 0 !important;
    border-radius: 4px;
    background-color: white;
    z-index: 1;
}

.closeOptions:hover {
    color: red;
}

.optionDiv {
    padding: 0.25em 0.5em !important;
    cursor: pointer;
}

.optionDiv:hover {
    background-color: var(--filter-panel);
}

.closeOptionDiv {
    color: rgba(128, 128, 128, 0.705);
    font-size: 0.65em;
}

.editInputOverlay {
    pointer-events: none;
    position: absolute;
    background-color: var(--document-edit-highlight);
    height: 100%;
    width: 98%;
    z-index: 9999999;
}

/* next two classes handle style for dispaly/toggling the length of revert patch */
.revertPatch {
    /* for viewing whole jsonrevertpatch */
    max-height: 1.3em;
    position: absolute;
    min-width: 50%;
}

.dataOutputSpan {
    width: 50%;
}

.historiesDiffOldVersionHeader,
.historiesDiffNewVersionHeader {
    display: inline;
    position: absolute;
    margin: 0 0.5em 0 0.5em;
}

.historiesDiffOldVersionHeader {
    /* float: right; */
    left: 0.25em;
}

.historiesDiffNewVersionHeader {
    /* float: right; */
    right: 1.15em;
}

.noEllipsis {
    white-space: normal;
    overflow: visible;
}

.bi-arrow-right-short,
.bi-arrow-down-short,
.expandDocument {
    cursor: pointer;
    user-select: none;
    display: inline;
}

.documentActionButtonDiv {
    position: relative;
    float: right;
    z-index: 1;
}

.documentActionButtonDiv svg {
    fill: black;
    margin: 0 0.25em 0 0;
    padding: 0.1em;
    cursor: pointer;
    z-index: 2;
}

.docActionHoverText {
    width: fit-content !important;
    float: right;
    padding: 0.15em;
    background-color: rgb(37, 38, 49);
    color: rgb(255, 255, 255);
    font-size: 0.75em;
    border: thin solid rgb(200, 200, 200);
    z-index: 999999;
}

.editHoverText {
    position: absolute;
    bottom: -2em;
    left: -0.05em;
    padding: 0.15em !important;
    background-color: rgb(37, 38, 49);
    color: rgb(255, 255, 255);
    font-size: 0.75em;
    border: thin solid rgb(200, 200, 200);
    z-index: 999999;
    white-space: nowrap;
}

.documentEditValueInput {
    display: inline;
    border: none;
    padding: 0 0.25em;
    font-size: 1em;
    max-width: 100%;
}

/* this is for dynamic input width component */
/* display none would cause the offset width use in input component to always be 0 */
#hide {
    position: absolute;
    opacity: 0;
    z-index: -100;
    white-space: pre;
}

.inputWrapper {
    display: inline;
    padding: 0 !important;
    max-width: 30%;
}

.docInputsDiv>div:nth-child(3) {
    max-width: 65% !important;
}

/* wasn't recognizing the font size for some reason */
.editInputDiv textarea {
    font-size: 0.85em;
    /* width: 45%; */
    flex: 2 1 100%;
    /* Setting the width just makes a gap between key and record. This is to make input less wide while preventing that gap */
    margin-right: 2em;
    max-width: 55%;
}

.inputWrapper:ch input {
    min-width: 1em;
    padding-left: 0.1em;
}

.datatypeIndicator {
    opacity: 0;
}

.editModeButtonDiv {
    padding: 0 !important;
    width: fit-content;
    display: inline-flex;
    float: right;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 0.15em;
}

.editModeButtonDiv button {
    padding: 0.25em !important;
    /* buttons weren't clickable, need higher zindex */
    z-index: 9;
}

.editModeDocument {
    box-shadow: 3px 3px 3px #5f5f5f5d;
}

.editModeButtonDiv .saveBtn {
    margin: 0 0.25em 0 0em !important;
}

.editModeObjectOutput {
    margin-left: 1em;
}

.dataTypeDropdown {
    position: absolute;
    right: 1em;
    border: none;
    margin-right: 0.5em;
    color: var(--bs-gray);
    flex: 1;
}

.dataTypeDropdown:focus {
    outline: none;
}

.bi-trash-fill:hover,
.bi-pencil-square:hover,
.historyRevert:hover {
    fill: var(--bs-success);
}

.noQueryResultOutput {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 5em;
}

.filterResultError {
    margin-top: 5em;
}

.rightColumnDataView h3 {
    font-size: 2rem;
    margin-top: 1em;
}

/* ---- Add Data Modal (opens with Add Data button onclick) ---- */
.addDataModal,
.alertModal,
.loadingDocuments,
.loadingDocumentsMain,
.revertModal,
.confirmModal {
    background-color: rgb(231, 231, 231);
    padding: 2em 1em 1em 1em;
    border-radius: 10px;
    box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.4);
    box-shadow: 2px 5px 14px 0px rgba(0, 0, 0, 0.4);
    border: 1px solid black;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 45%;
    z-index: 99999999;
}

/* .confirmModal {} */

.confirmModal button {
    float: right;
    margin: 0.25em;
    padding: 0.25em 0.5em;
}

.revertModal {
    display: flex;
    flex-direction: column;
    height: 90%;
    width: 95%;
    padding-top: 1em;
}

.revertModal .historyDataDiv {
    display: grid;
    grid-template-columns: 25% 75%;
    padding: 0.25em 0;
    flex: 4;
    height: 75% !important;
}

.revertModalDiffArea,
.revertModalListArea {
    position: relative;
    overflow-y: auto;
}

.revertModalListArea {
    height: 90%;
    /* margin-right: 0.25em; */
    direction: rtl;
}

.revertModalListArea ol {
    overflow-y: scroll;
    word-break: break-all;
    margin: 0 1em 0 0.25em;
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-end;
    overflow-x: auto;
    direction: ltr;
}

.revertModalListArea li {
    cursor: pointer;
    padding: 0.25em;
    white-space: nowrap;
}

.historyTitleDiv {
    margin-bottom: 1em;
}

.line-modify pre,
.line-equal pre,
.line-add pre,
.line-remove pre {
    font-size: 0.95em;
    line-height: 1.25em;
}

.line-number {
    font-size: 0.5em;
}

.selectedRevert {
    background-color: #1576499d;
    color: black;
    width: fit-content;
    border-radius: 10px;
    padding: 0.15em;
}

/* the highlight doesn't cover the list item marker, so just ensuring it stays black */
li.selectedRevert::marker {
    color: black;
}

/* next 3 classes are used to make the list item's number be styled as well (wasn't in background */
/* ol {
    list-style: none;
    counter-reset: revert-list-counter;
    padding: 0 0.5em;

}

ol li {
    counter-increment: revert-list-counter;
    margin: 0.25em 0;
    cursor: pointer;
}

ol li::before {
    content: counter(revert-list-counter) ". ";
} */

.revertModalListArea ol::-webkit-scrollbar,
.diffArea::-webkit-scrollbar {
    display: none;
}

.revertModalDiffArea {
    justify-self: end;
    width: 100%;
    min-height: 100%;
    max-height: 100%;
}

.revertModalDiffArea .buttonDiv {
    position: absolute;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: flex-end;
    width: 100%;
}

.revertModalDiffArea button {
    margin-left: 0.25em;
}

.diffTextArea {
    height: 90%;
    background-color: white;
    border-radius: 10px;
    padding: 1.5em;
    padding-top: 2em;
    font-size: 1.125em;
    word-wrap: break-word;
    overflow-y: scroll;
}

.revertBtn {
    margin-right: 0.25em;
}

.loadingDocuments,
.loadingDocumentsMain {
    width: fit-content;
    background-color: white;
    padding: 2em;
}

/* this handles the loader in list-documents, need to handle separate for the z-index so two loaders don't pop up*/
.loadingDocumentsMain {
    z-index: 9999999;
}

.loadingDocuments h3,
.loadingDocumentsMain h3 {
    margin: 0;
}

.alertModal {
    display: flex;
    align-items: center;
    flex-direction: column;
    width: fit-content;
    padding: 2em;
}

.alertModal>.btn {
    margin-top: 1em;
    align-self: flex-start;
}

.ace_editor {
    width: 100% !important;
    padding: 0.25em;
}

.modalButtons button {
    margin: 0.5em 0 0 0.5em;
    float: right;
}

.modalTitle {
    font-size: 24px;
}

/* this is used to block the ui when the Add Data modal is open */
.blockUiDiv {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.75);
    z-index: 999;
}

/**************************************************************************/
/* Login */
/**************************************************************************/
.login_row {
    display: block;
    margin-top: 0.25em;
    text-align: center;
}

.login_block {
    display: block;
}

.login_label {
    display: block;
    font-size: 0.75em;
    margin: 0.2em 0em;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.login_input {
    display: block;
    margin: 0.5em 0em 1em 0em;
}

.login_input input {
    padding: 0.75em;
    width: 92%;
    border-width: 0px;
    background: #e9effe;
    text-align: center;
    background: rgba(255, 255, 255, 0.5);
    border: 2px solid rgba(132, 145, 204, 0.6);
    z-index: 999999999999;
    pointer-events: auto;
    position: relative;
}

.login_input input:disabled {
    border: none;
    width: 88%;
}

.login_row #login_button {
    border-width: 0px;
    padding: 1.1em;
    min-width: 50%;
    color: #fff;
    margin-top: 0.5em;
    /*
    background:rgba(0,0,0,0.4);
    border-radius:50px;
    */
    background: rgba(132, 145, 204, 0.8);
    /*
    border-radius:5px;
    */
    text-transform: uppercase;
    font-size: 0.85em;
    letter-spacing: 2px;
}

.login_row #login_button:hover {
    background: rgba(132, 145, 204, 1);
}

.login_row #errors {
    margin-top: 1.5em;
    border: 1px solid red;
    background: rgba(176, 23, 31, 0.7);
    padding: 0.5em 1em 0.7em 1em;
    color: #fff;
}

.login_row #switchUser {
    display: none;
}

.locked-email .login_row #switchUser,
.locked-email .login_row .login_input.email {
    display: inline-block;
}

.locked-email .login_row #switchUser {
    padding: 0 2em;
}

.locked-email .login_row .login_input.email input:-internal-autofill-selected {
    border: none;
    opacity: 0.6;
    background: white !important;
    background-color: white !important;
    margin-right: 0.5em;
}

.ui-dialog.ui-corner-all.ui-widget.ui-widget-content.ui-front.ui-draggable.ui-resizable {
    background: rgba(255, 255, 255, 1);
    border: 10px solid rgba(255, 255, 255, 1);
    padding: 2em 1em 1em 1em;
    border-radius: 20px;
    box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.4);
    box-shadow: 2px 5px 14px 0px rgba(0, 0, 0, 0.4);
    z-index: 9999999999999;
}

.ui-dialog.ui-corner-all.ui-widget.ui-widget-content.ui-front.ui-draggable.ui-resizable.stacked-dialog {
    z-index: unset;
}

.ui-dialog .ui-widget-header {
    border-width: 0px;
    background: transparent;
    color: #333333;
    font-weight: bold;
    font-size: 1.5em;
}

.ui-dialog .ui-dialog-title {
    display: none;
}

.ui-dialog-titlebar.ui-corner-all.ui-widget-header.ui-helper-clearfix.ui-draggable-handle {
    width: 3em;
    height: 4em;
    background-size: 3em 3em;
    background-image: url(../images/hero.svg);
    margin: 0em auto 0.5em auto;
    background-repeat: no-repeat;
    -webkit-filter: drop-shadow(3px 2px 3px rgba(0, 0, 0, 0.5));
    filter: drop-shadow(3px 2px 3px rgba(0, 0, 0, 0.5));
}

.ui-dialog-titlebar-close,
.ui-button.ui-corner-all.ui-widget.ui-button-icon-only.ui-dialog-titlebar-close {
    display: none;
}

.ui-widget-overlay.ui-front {
    /*z-index: 9000000 !important;*/
    position: absolute;
}

.login_row a {
    color: rgb(33, 37, 41);
}

.blockUI {
    z-index: 999999999999 !important;
}

div.ui-dialog.ui-corner-all.ui-widget.ui-widget-content.ui-front.ui-draggable.ui-resizable {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
}