/**
 * vine.css
 *
 * @author David Eads
 * @date   October 8, 2019
 *
 * (c) 2019-2026 Vine Financial Inc. All Rights Reserved.
 */

/*
 * Base structure
 */

/*Enable when debugging table layout issues
 means you can see all cell borders
 however beware the 1px that the table border consumes!*/
/*
 table, th, td {
  border: 1px solid;
}
*/

/*Styling for audit results table*/
#auditLogEntriesContainer td {
    padding-top: 0.25em;
    padding-bottom: 0.25em;
}

.audit-user-typeahead-disabled {
    background-color: rgb(230, 227, 227) !important;
}

#auditLogEntriesNextPreviousButtonsContainer {
    margin-bottom: 0 !important;
}

#auditControlsContainer {
    border: 2pt solid var(--vineGreenHover) !important;
    padding: 1em !important;
    border-radius: 8px;
    margin-top: 2em;
    margin-bottom: 2em;
}

#auditControlsContainer .form-group {
    margin-top: 0.5em !important;
}

.audit-typeahead-clear {
    content: url("../img/refresh.svg");
    cursor: pointer;
    margin-top: 0.5em;
}

.audit-nav-hidden {
    visibility: hidden;
}

.audit-inline-content {
    margin-top: 0.8em;
}

.audit-download-link {
    font-style: italic;
    padding-top: 0;
    padding-bottom: 0;
}

.audit-download-link div {
    height: 1.2em;
}

.audit-log-entries-table {
    width: 100%;
}

.audit-date-input {
    padding-left: 0.5em;
    padding-right: 0.5em;
    width: 8em;
    display: inline-block;
}

.audit-time-input {
    padding-left: 0.5em;
    padding-right: 0.5em;
    width: 5em;
    display: inline-block;
}

.audit-controls-hidden {
    display: none;
}

.audit-results-caption {
    caption-side: top;
    text-align: left;
    font-weight: 500;
    padding-bottom: 0.5em;
}

.audit-filename-input {
    width: 80%;
    display: inline-block;
}

.audit-filename-suffix {
    display: inline-block;
    font-style: italic;
    color: gray;
    padding-left: 0.5em;
    font-size: larger;
}

#csvFilenameModal .modal-body {
    overflow: unset;
}

/*Workaround to make the typeahead and its dropdown menu use the full width of the container, which is important for fitting long user names and avoiding truncation */
#auditControlsContainer .twitter-typeahead,
.tt-hint,
.tt-input,
.tt-menu {
    width: 100%;
}

/* RMA industry averages filter bar — sits above the jspreadsheet table,
   outside jspreadsheet's DOM so native <select> elements work. */
#rmaCategoryFilters {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding: 4px 8px;
    background-color: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
    font-size: 0.85em;
}

.rma-naics-input {
    padding-left: 0.25em;
    height: 2.2em;
    border-width: 1px;
    border-left-style: outset;
    border-top-style: outset;
    border-color: gray !important;
    border-radius: 5px !important;
    margin-left: 0.5em !important;
}

.rma-naics-select {
    width: auto;
    display: inline;
    margin-left: 0.5em;
}

.rma-naics-category-display {
    font-weight: 400;
    margin-left: 0.5em;
}

.rma-naics-category-value {
    margin-right: 1em;
    margin-left: .5em;
}

.paginator-label {
    padding-left: 0.5em;
}

/*Override Quill TExt editor theme when used as input field*/
.vine-display-value-span .ql-toolbar {
    border-top: 0;
    border-left: 0;
    border-right: 0;
}

.vine-display-value-span .ql-container {
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
}

.vine-rich-text-editor-container {
    padding-left: 0 !important;
}

.tooltip-inner {
    text-align: left;
}

.vine-cell-hide {
    display: none;
    /*width:0;*/
}

.select-not-required {
    font-style: italic;
    color: gray;
}

.btn-vine-custom-action-hidden {
    display: none !important;
}

.vine-simple-select {
    border-radius: 0;
    margin-left: 1em;
    margin-right: 1em;
}

/*Workaroud to resize and better position the '+' green btn when adding collaborators to a deal*/
#dealCollaboratorsListModal .btn-vine-circle-lg {
    bottom: 0;
    padding-top: revert;
    margin-bottom: 8px;
    margin-right: 8px;
    width: 40px;
    height: 40px;
}

/*Workaroud to resize modal when adding collaborators to a deal*/
#dealCollaboratorsListModal .vine-list-table-content-top {
    height: revert;
    margin-bottom: revert;
}

.collateral-group-id-col {
    display: none;
}

.vine-collateral-group-container {
    width: 100% !important;
    position: relative;
}

.vine-collateral-group-table {
    width: 100%;
    border-collapse: collapse;
}

.collateral-group-editor-container {
    z-index: 5000 !important;
    display: inline-block;
    border: 0;
    border-radius: 8px;
    position: relative;
    padding-left: 7px;
    padding-top: 8px;
    padding-bottom: 8px;
    min-height: 48px;
    min-width: 200px;
    max-width: 800px;
    background: white;
    box-shadow: 0 0 5px 3px rgb(151, 188, 141);
}

.proposal-collateral-percentage-input {
    width: 4em;
}

.proposal-collateral-amount-input {
    width: 8em;
}

.collateral-available-exceded {
    font-weight: 500;
    color: red
}

.collateral-edit-number-cell {
    text-align: right;
}

.collateral-edit-total-cell {
    font-weight: 500;
    text-align: right;
}

#definitionEditor .twitter-typeahead {
    width: 100%;
}

#definitionEditor .tt-menu {
    width: 100%;
}

/*Experimental - floating needs list*/
#floatyNeedsList {
    position: absolute;
    z-index: 1000;
    top: 200px;
    left: 400px;
}

#floatyNeedsList .needsListCloseBtn {
    font-weight: 700;
    top: 10px;
    right: 30px;
    font-size: larger;
    position: absolute;
    cursor: pointer !important;
}

#floatyNeedsList .grouped-fact-container {
    margin-top: 0.5em;
}

/*Show the floating Needs List as it now has content*/
#floatyNeedsList:has(.vine-widget) {
    display: block !important
}

/*Add/edit financial period modal*/
#addEditFinancialPeriodModal .form-group {
    margin-top: 0.75em;
    padding-top: 0 !important;
}

.projected-financial-periods-hide {
    display: none;
}

.projected-financial-periods-label-hide {
    display: none;
}

.fp-project-select-label {
    margin-left: 0.5em;
}

/* styling for transaction sheet rows when expanded where the ai, stated etc are on different rows */
.expanded-rows-top {
    border-bottom: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-top: 1px solid black !important;
}

.expanded-rows-top-cell01 {
    border-left: 1px solid #ccc !important;
}

.expanded-rows-top-label {
    border-bottom: 0 !important;
    border-top: 1px solid black !important;
    text-align: left !important;
}

.expanded-rows-middle {
    border-top: 1px dashed gainsboro !important;
}

.expanded-rows-middle-label {
    border-top: 0 !important;
    border-bottom: 0 !important;
    text-align: right !important;
}

.expanded-rows-bottom {
    border-bottom: 1px solid black !important;
}

.expanded-rows-bottom-label {
    border-top: 0 !important;
    border-bottom: 1px solid black !important;
    text-align: end !important;
}


.loading-overlay-no-display {
    display: none;
    z-index: 0;
}

.spreader-note-no-display {
    display: none;
}

.spreader-doc-view-no-display {
    display: none !important;
}

.spreader-tabs-no-display {
    display: none;
}

.sheet-no-display {
    display: none !important;
}

/*The Vine Spinner Overlay*/
.loading-overlay-display {
    position: absolute;
    left: 50%;
    top: 20%;
    height: 100px;
    width: 100px;
    margin: 0px auto;
    -webkit-animation: rotation .6s infinite linear;
    -moz-animation: rotation .6s infinite linear;
    -o-animation: rotation .6s infinite linear;
    animation: rotation .6s infinite linear;
    border-left: 15px solid var(--vinePaleGreen);
    border-right: 15px solid var(--vinePaleGreen);
    border-bottom: 15px solid var(--vinePaleGreen);
    border-top: 15px solid var(--vineGreenHover);
    border-radius: 100%;
    z-index: 200;

}

@-webkit-keyframes rotation {
    from {
        -webkit-transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(359deg);
    }
}

@-moz-keyframes rotation {
    from {
        -moz-transform: rotate(0deg);
    }

    to {
        -moz-transform: rotate(359deg);
    }
}

@-o-keyframes rotation {
    from {
        -o-transform: rotate(0deg);
    }

    to {
        -o-transform: rotate(359deg);
    }
}

@keyframes rotation {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(359deg);
    }
}

/*End of Vine Spinner Overlay*/


/*Spreader popover*/
.popover .popover-header {
    background-color: var(--vineGreen);
    color: white;
}

.popover .popover-body {
    background-color: var(--vineGreenHover);
    color: white;
}

.popover-arrow:after {
    border-top-color: var(--vineGreenHover) !important;
}

.popover td {
    padding-right: 1em;
}

/*Basic tabbing styling, used in admin UI for editing an org*/
.tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
.tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
    font-size: 17px;
}

/* Change background color of buttons on hover */
.tab button:hover {
    background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
    background-color: var(--vineGreen);
    color: #fff;
    font-weight: 600;
    box-shadow: inset 0 -3px 0 var(--vineGreenHover);
}

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
}

/*end of basic tab styling*/

/*'ai Value Present' indicator*/
.ai-val-present-different {
    position: relative;
}

.ai-val-present-different:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    display: block;
    border-left: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-top: 15px solid var(--vineGreen);
    border-radius: 5px;
}

.ai-val-present-same {
    position: relative;
}

.ai-val-present-same:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    display: block;
    border-left: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-top: 15px solid lightgrey;
    border-radius: 5px;
}

/*Vine checkbox styling*/
input[type='checkbox'] {
    -moz-appearance: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    vertical-align: middle;
    outline: none !important;
    font-size: inherit !important;
    cursor: pointer !important;
    width: 1.2em !important;
    height: 1.2em !important;
    background: white !important;
    border-radius: 0.25em !important;
    border: 0.125em solid #555 !important;
    position: relative !important;
}

input[type='checkbox']:checked {
    background: var(--vineGreenHover) !important;
}

input[type='checkbox']:checked:after {
    content: url("../img/whitecheck12x12.png");
    color: var(--vinePaleGreen);
    position: absolute !important;
    font-size: 90% !important;
    left: 0.0625em !important;
}


.ind-avg-table {
    margin: 1em;
}

.ind-avg-table td {
    padding: 0.5em;
}

.label-click-enabled {
    color: #007bff;
    text-decoration: underline;
    cursor: pointer;
}

.back-btn-show {
    display: block;
}

.back-btn-hide {
    display: none;
}

/*Grouped Fact grid list*/
.gfgl-add-btn-enabled {
    font-size: 1.5em;
    margin-right: .7em;
    display: block;
    cursor: pointer;
    margin-bottom: 8px;
    margin-left: 0.5em;
    width: 1.5em;
    border-radius: 50%;
    background-color: var(--vineGreen);
    color: var(--vinePaleGreen);
    text-align: center;
    display: inline-block;
    cursor: pointer;
}

.gfgl-add-btn-enabled:hover {
    color: black;
}

.gfgl-add-btn-disabled {
    font-size: 1.5em;
    margin-right: .7em;
    display: block;
    cursor: pointer;
    margin-bottom: 8px;
    margin-left: 0.5em;
    width: 1.5em;
    border-radius: 50%;
    background-color: lightgray;
    color: white;
    text-align: center;
    display: inline-block;
}

.gfgl-cancel-btn-show {
    float: left;
    padding-left: .5em;
    padding-bottom: .3em;
    font-size: 1.5em;
    color: var(--vineGreen);
    display: block;
    cursor: pointer;
}

.gfgl-save-btn-disabled {
    float: left;
    padding-left: .5em;
    padding-bottom: .4em;
    font-size: 1.5em;
    opacity: 0.2;
    display: block;
}

.gfgl-save-btn-enabled {
    float: left;
    padding-left: .5em;
    padding-bottom: .4em;
    font-size: 1.5em;
    display: block;
}

.gfgl-btn-hide {
    float: left;
    width: 0;
    display: none;
}

.gfgl-btn-align {
    float: left;
}

.gfgl-parent {
    display: flex !important;
    align-items: flex-end;
}

.gfgl-parent table {
    border-style: solid !important;
}

/*default styling for table cells*/
.gfgl-parent td {
    background-color: white;
    color: darkslategray !important;
}

/* height for grouped fact list in jspreasheet
native row height is in px only*/
.gfgl-parent tr {
    height: 2.2em
}


/*Base jspreadhseet vine style*/
.jss_worksheet th {
    font-weight: 500 !important;
    height: 3em !important;
}

/*when there is atypeahead in a field and the field is 
set to disabled the background colour is not shaded. Use this */
.vine-typeahead-disabled {
    background-color: rgb(227, 231, 234) !important;
}

.note-dropdown-vine {
    min-width: 40em;
}

.vine-longtext {
    border: 0;
    outline: 0;
    width: 100%;
}

.image-group-container {
    position: relative;
    width: 100%;
    min-height: 380px;
    border: 1px solid #dee2e6;
    border-radius: 8px;
}

.image-group-container .dz-drag-hover {
    background-color: var(--vinePaleGreen);
    border-radius: 8px;
    opacity: .9;
}

.image-group-dropzone-foreground {
    position: absolute !important;
    z-index: 100;
    opacity: .1;
    width: 100% !important;
    height: 100% !important;
}

.image-group-spinner-overlay {
    position: absolute !important;
    background-color: white;
    z-index: 150;
    opacity: .8;
    width: 100% !important;
    height: 100% !important;
}

.image-group-spinner {
    position: absolute !important;
    z-index: 200;
    top: 40%;
    left: 40%;
}

.image-group-dropzone-background {
    position: absolute !important;
    z-index: 50;
    opacity: .1;
    width: 100% !important;
    height: 100% !important;
}

.image-group-container .owl-item {
    border: 1px solid #dee2e6 !important;
    border-radius: 8px !important;
    margin: 8px !important;
    padding: 3px !important;
}

.image-group-container .owl-stage {
    width: 100% !important;
}

#imageViewerCarousel .owl-nav {
    font-size: 2.5em;
    color: var(--vineGreenHover);
}

.image-preview-fact-editor .owl-nav {
    font-size: 2.5em;
}

.image-preview-fact-editor {
    position: relative;
}

.image-preview-close-btn {
    color: black;
    position: absolute;
    border-radius: 50%;
    border: 2px hsla(111, 100%, 88%, 0.5);
    top: 8px;
    right: 8px;
    font-size: 1.25em;
    background: hsla(111, 100%, 88%, 0.5);
}

.image-preview-close-btn span {
    margin: 2px;
}

.image-preview-close-btn:hover {
    border: white;
    background-color: white;
}

.upload-dropzone-label {
    display: flex;
    padding-left: 20px;
}

.upload-dropzone-arrow {
    display: flex;
    font-size: xxx-large;
    color: var(--vineGreenHover);
    padding-top: 20px;
    padding-left: 20px;
}

.vine-node-label {
    display: flex;
    margin-top: 1rem;
}

.vine-node-label .list-group-item {
    margin-bottom: 0px;
    border: 0;
    padding-bottom: 0px;
}

.dataroom-browser {
    position: relative;
    z-index: 200;
    margin-left: -0.25rem;
    /* Trying to get all the elements to line up together on the left */
}

.timestamp-stopwatch {
    content: url("../img/stopwatch-green.png");
    float: right;
    width: 27px;
    margin-right: 0.2em;
}

.timestamp-stopwatch-small {
    content: url("../img/stopwatch-green.png");
    float: right;
    width: 22px !important;
    margin-right: 0.3em;
}

.timestamp-values {
    display: none;
}

.timestamp-milestone {
    width: 100% !important;
    max-height: 10em;
    overflow: auto;
}


/*Doc upload dropzone within dataroom browser tree*/
.vine-upload-node-small {
    width: 50% !important;
    height: 10em;
    display: table;
    border-radius: 16px;
    box-shadow: 0px 8px 20px lightgray;
    /* background-color:rgb(227, 231, 234) !important; */
    /* margin-bottom: 1em;*/
    /* Eads styling tweaks. I want a matching thin green border */
    /* but I haven't gotten it to work yet, for some reason     */
    /* I also want to add a folder image in the background      */
    background-color: whitesmoke;
    margin-top: 1rem;
    margin-bottom: 1rem;
    margin-left: -0.25rem;
    /* Trying to match the adjustments to dataroom-browser above */
    z-index: 4000;
    cursor: pointer;
}

.vine-upload-node-small .upload-inner {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    z-index: 3500;
}

.vine-upload-node-small .upload-message {
    font-style: italic;
    color: gray;
    z-index: 3500;
}

.vine-upload-node-small .upload-folder-name {
    z-index: 3500;
}

/*Large data room browser upload zone
designed to be invisible*/
.vine-upload-node-large {
    width: 100% !important;
    height: 10em;
    display: table;
    /*JOS - need to expand height to bottom of screen*/
    height: 40em;
    z-index: 4000;
    cursor: pointer;
}

.vine-upload-node-large .upload-inner {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    z-index: 3500;
    background-image: url("../img/blue-folder.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 25em;
}

.vine-upload-node-large .upload-message {
    font-style: italic;
    color: gray;
    z-index: 3500;
}

.vine-upload-node-large .upload-folder-name {
    z-index: 3500;
}

.vine-upload-html-pane-emphasize {
    border-color: var(--vineGreenHover);
    border-style: solid;
    border-radius: 16px;
}

/*to prevent pointy corners impinging on curved radius corner of parent*/
.vine-upload-html-pane-ul-emphasize {
    border-radius: 16px;
}

.vine-dataroom-dropzone-visible {
    width: 90%;
    padding: 0;
    height: 100%;
    right: 10px;
    z-index: 100;
    position: absolute;
    bottom: 0;
    top: 125px;
    left: 234px;
    display: block !important;
}

.folder-drag-highlight {
    background-color: var(--vineGreenHover);
}

/*Doc upload grid*/
/* This is the top-level class on the DocUpload widget */
.doc-upload-grid-top {
    order: 3;
    width: 100%;
    margin-left: 9rem;
}

/* Not currently needed because we're setting the margin on the outer div. */
/*
.doc-upload-grid {
  margin-left: 48px;
  margin-top: 48px;
}
*/

.doc-upload-grid table {
    border-collapse: collapse;
}

.doc-upload-grid-msg {
    pointer-events: none;
    position: absolute;
    font-size: 0.8em;
    margin-left: 20px;
    padding-top: 50px;
    text-align: center;
    width: 100px;
}

.doc-upload-grid-label {
    display: inline-block;
    width: 200px;
    padding: 8px;
}

.doc-upload-grid table th {
    text-align: center;
}

.doc-upload-grid table tbody td {
    border: 1px solid black;
}

/*To stop filename text overflowing downwards*/
.doc-upload-grid-preview-filename {
    -webkit-line-clamp: 2;
    overflow: hidden;
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
}

.doc-upload-grid .doc-upload-grid-cell {
    width: 150px;
    height: 150px;
    background-color: lightgray;
}

.doc-upload-grid-preview {
    margin-top: 24px;
    display: inline-block;
    content: url("../img/document.svg");
    width: 56px;
}

.doc-upload-grid-preview-filename {
    margin-top: 8px;
    padding-right: 8px;
    padding-left: 8px;
    overflow-wrap: break-word;
}

.doc-upload-grid-cell .dz-preview {
    position: absolute;
    width: 150px;
    height: 150px;
}

.doc-upload-grid-cell-trash {
    position: absolute;
    top: 8px;
    right: 8px;
    content: url("../img/delete.svg");
}

.doc-upload-grid-cell-spinner {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 16px;
    height: 15px;
    border: 3px solid var(--vineGreen);
    border-bottom-color: transparent;
    border-radius: 50%;
    box-sizing: border-box;
    animation: cell-spinner-rotation 1s linear infinite;
}

@keyframes cell-spinner-rotation {
    0% {
        transform: rotate(0deg);
    }

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

/*
Styling for spreading view
Doc browser and doc viewer
*/

/* experimental */
/* Flexbox lets the doc viewer to use the rest of the space in the viewport
   but not more that what's visible, then make the viewport scrollable.
   It's important to set the width of the outer DIV container of the table
   to 90% of the view port (leaving room for sidebar and whitespace).
   Then the individual elements in TR and TD can set min-width and flex 
   settings invidually to guide their layout depending upon the amount of
   positive or negative space. (With the doc view it's mostly negative space)
 */

/* 
Flex Shorthand:
 flex-grow: 0
 flex-shrink: 0
 flex-basis auto 
*/

/* used to prevent outside clicks when showing popup*/
.disable-outside-clicks {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10000;
    display: block;
}

.allow-outside-clicks {
    display: none;
}

.pfs-section-heading {
    text-transform: uppercase;
    font-weight: 700;
    font-size: 1.1em;
}

.pfs-container {
    margin-bottom: 8px;
}

.pfs-help-text {
    font-style: italic;
}

.pfs-heading {
    font-weight: 700;
    margin-bottom: 0.5em;
}

/*'jss_hidden' is a jspreadsheet style in jspreadsheet.css that we are, somehere
overriding. The net effect is that when merging cells, a cell that
//should be hidden is not, this obscures the 'Total' col.
Seems to work if added here and made 'important'*/
.jss_hidden {
    display: none !important;
}

/*Override styling for close btn on jss Notes editor*/
.jss_dialog.jclose:after {
    position: absolute;
    top: 0;
    right: 0;
    margin: 10px;
    content: 'X';
    font-size: 1.5em;
    font-family: Arial, Helvetica, sans-serif;
    cursor: pointer;
    text-shadow: 0 0
}

/*jss is programmatically setting the width of the Notes editor to be too big sometimes, override this*/
.jss_focus {
    min-width: 600px !important;
}

.spread-entity-dropdown-btn {
    min-width: 50% !important;
    background-color: white;
    color: black;
    text-align: left !important;
}

.spread-entity-dropdown-btn.show {
    background-color: white;
    color: black;
}

.spread-entity-dropdown-btn:hover {
    background-color: white;
    color: black;
}

.spread-entity-dropdown-btn:active {
    background-color: white !important;
    color: black !important;
}

.spread-entity-dropdown-btn:disabled {
    background-color: white !important;
    color: black !important;
    opacity: 1 !important;
}

.spread-entity-dropdown {
    margin-bottom: 1em !important;
}

.spread-entity-dropdown>li>a:hover {
    background-color: var(--vinePaleGreen) !important;
}

.spread-entity-loading {
    font-style: italic !important;
    font-weight: 200 !important;
    padding-left: 1em;
}

.spread-entity-loading::after {
    display: none !important;
}

.spread-data-room-label {
    margin-top: 0.8em;
    margin-bottom: 0.8em;
    font-weight: 500;
    margin-left: 0.2em;
    font-size: 1.15em;
}

.spreader-fp-col-hdr-2-line {
    padding: 0.4em;
}

.spreader-snapshot {
    content: url("../img/camera.svg");
    height: 1.5em;
}

.spreader-snapshot-hide {
    display: none;
}

.spreader-snapshot-saving {
    font-style: italic;
    height: 1.5em !important;
    display: inline-block;
    padding-top: 0.25em
}

.spreader-label-header {
    text-align: left !important;
}

.spreader-label-column {
    text-align: center !important;
}


/* Put rounded corners header column for jspreadsheet tables with this style (eg Needs List) */
/* For an explanation of why this is done this way see: */
/* https://stackoverflow.com/questions/2717480/css-selector-for-first-element-with-class */
.spreader-outer-header {
    border-top-left-radius: 16px;
    border-left: 0px;
    background-color: var(--vineGreen) !important;
    color: white;
    text-align: center !important;
}

/*Deal name header in a needs list*/
.needs-list-deal-header {
    font-weight: 900;
    font-size: larger;
}

/*Hide cell left borders in a deal list header apart from the first cell*/
.needs-list-deal-header td[data-x]:not([data-x="0"]) {
    border-left: transparent;
}

/* title for needs list in data room
and other places where there is an embedded sheet*/
.sheetTitleSpan {
    font-weight: 700;
}

/*Push the needs list down slightly to align with data room icons*/
.needs-list-data-rooms-cell #needsListDiv {
    margin-top: 8px;
}

#needsListDivDataRoom {
    margin-top: 0.5em;
}

.needs-list-data-rooms-cell {
    vertical-align: top;
    position: relative;
    display: none;
}

/*Force needs list in data room to size cols to content
otherwise, if generated when hidden, col widths are too small*/
.needs-list-data-rooms-cell table {
    table-layout: auto !important;
}

/*hide needs list btn*/
.needs-list-data-rooms-cell .needsListCloseBtn {
    font-weight: 700;
    top: 1.8em;
    right: 2.7em;
    font-size: 1.4em;
    position: absolute;
    cursor: pointer;
    color: var(--vineGreen);
}

.data-room-needs-list-container-hide {
    display: none;
}

.vine-multi-select-ul {
    margin-bottom: 0;
    overflow: auto;
    list-style-type: none;
    padding: 0;
    max-height: 15em;
}

.vine-multi-select-item-hide {
    display: none !important;
}

.vine-multi-select-item-show {
    display: block !important;
}

.needs-list-unhide-hide {
    display: none;
}

/*show hidden needs list*/
.needs-list-unhide-show {
    content: url("../img/chart.bar.doc.horizontal.svg");
    filter: var(--vineGreenFilter);
    position: absolute !important;
    top: 1.7em;
    left: 0.0625em !important;
    display: block !important;
}

/*Make needs list container visible if it has content*/
.needs-list-data-rooms-cell:has(.jss_container) {
    display: block;
}

/*Add spacing padding if the data room cell has a needs list in it*/
.needs-list-data-rooms-cell:has(.gfgl-parent) {
    padding-right: 2em;
}

.data-rooms-data-rooms-cell {
    vertical-align: top;
}

/* Unset the top-left radius on all the other items */
.spreader-outer-header~.spreader-outer-header {
    border-top-left-radius: unset;
}

/* Based on the above, I'm not sure why this works */
/* .spreader-label-column:last-child { */
.spreader-outer-header:last-child {
    border-top-right-radius: 16px;
}

/* Remove the line from the top of the header with the rounded corners so it doesn't go beyond rounded corners */
/* NOTE this isn't an ideal way to specify the rounded corners that happen to be in a widget rather */
/*      than nested in the spreading table, but it works for now. I tried lots of other stuff that didn't work. */
div.vine-widget .jss_content {
    border-top: 0px;
}

/* Round the top left and right of the table itself too, so the side lines are shorter */
.jss {
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
}

.spreader-label-default {
    /*color: darkgray !important;*/
    color: darkslategray !important;
}

.spreader-row-default {
    /*color: darkgray !important;*/
    color: darkslategray !important;
}

.collapse-section-header-expanded {
    color: black !important;
    font-weight: 700 !important;
    position: relative;
}

.collapse-section-header-expanded::after {
    content: url("../img/chevron-down.svg");
    top: -0.1em;
    position: absolute;
}

.collapse-section-header-collapsed {
    color: black !important;
    font-weight: 700 !important;
    position: relative;
}

.collapse-section-header-collapsed::after {
    content: url("../img/chevron-right.svg");
    top: -0.1em;
    position: absolute;
}

.collapse-section-header-notbold-collapsed {
    color: black !important;
    font-weight: 400 !important;
    position: relative;
}

.collapse-section-header-notbold-collapsed::after {
    content: url("../img/chevron-right.svg");
    top: -0.1em;
    position: absolute;
}

.collapse-section-header-notbold-expanded {
    color: black !important;
    font-weight: 400 !important;
    position: relative;
}

.collapse-section-header-notbold-expanded::after {
    content: url("../img/chevron-down.svg");
    top: -0.1em;
    position: absolute;
}

.collapse-section-subtotal {
    padding-left: 1.5em !important;
    color: black !important;
    font-weight: 700 !important;
    position: relative;
}

.collapse-section-child {
    padding-left: 1.5em !important;
}

.spreader-label-emphasize-01 {
    color: black !important;
    font-weight: 700 !important;
}

.spreader-row-emphasize-01 {
    color: black !important;
    font-weight: 700 !important;
}

.spreader-cell-emphasize-center {
    color: black !important;
    font-weight: 700 !important;
    text-align: center !important;
}

.spreader-cell-align-left {
    text-align: left !important;
}

.spreader-cell-align-center {
    text-align: center !important;
}

.spreader-label-italics-01 {
    color: darkslategray !important;
    font-style: italic;
}

.sheet-negative-number {
    color: red !important;
}

.spreader-no-left-border {
    border-left: none !important;
}

/* Subtotal row cells: show side borders only when the cell contains a value */
.vine-spreader-subtotal-value-cell {
    border-left: 1px solid #ccc !important;
    border-right: 1px solid #ccc !important;
}

/* STATEMENTS template row types */
.vine-spreader-statement-header {
    font-weight: bold;
    background-color: #f0f4f8 !important;
    border-bottom: 1px solid #b0bec5 !important;
}

/* Collapsable statement header — expanded state (chevron down + header background) */
.vine-stmt-header-expanded {
    font-weight: bold !important;
    background-color: #f0f4f8 !important;
    border-bottom: 1px solid #b0bec5 !important;
    position: relative;
}
.vine-stmt-header-expanded::after {
    content: url("../img/chevron-down.svg");
    top: -0.1em;
    position: absolute;
}
.vine-stmt-header-expanded-value {
    font-weight: bold !important;
    background-color: #f0f4f8 !important;
    border-bottom: 1px solid #b0bec5 !important;
}

/* Collapsable statement header — collapsed state (chevron right + header background on total row) */
.vine-stmt-header-collapsed {
    font-weight: bold !important;
    background-color: #f0f4f8 !important;
    position: relative;
}
.vine-stmt-header-collapsed::after {
    content: url("../img/chevron-right.svg");
    top: -0.1em;
    position: absolute;
}
.vine-stmt-header-collapsed-value {
    font-weight: bold !important;
    background-color: #f0f4f8 !important;
}

.vine-spreader-statement-total-label {
    font-weight: bold;
    border-top: 1px solid #b0bec5 !important;
}

.vine-spreader-statement-total-value {
    font-weight: bold;
    border-top: 1px solid #b0bec5 !important;
}

/* Row numbers: style jspreadsheet's native index column (td.jss_row) when the
   template has rowNumbers: true. The vine-row-numbers-active class is added to
   sheet.element by refreshRowNumbers(). */
.spreadingTabContent .vine-row-numbers-active > tbody > tr > td.jss_row {
    color: #444;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    text-align: right;
    padding-right: 5px;
    min-width: 28px;
    user-select: none;
    background-color: #f8f8f8;
}

/* Subtotal row label cell (col 0): left border only — anchors the row's left edge */
.vine-spreader-subtotal-label-cell {
    border-left: 1px solid #ccc !important;
}

/* Editable label property input inside a grouped fact row */
.vine-spreader-grouped-fact-label-input {
    background: transparent;
    border: none;
    outline: none;
    width: 100%;
    padding: 0;
    font: inherit;
    color: inherit;
    cursor: text;
}

/* When a checkbox is also present, shrink the input to leave room */
.vine-spreader-grouped-fact-label-input.vine-spreader-label-with-checkbox {
    width: calc(100% - 24px);
}

/* Subtotal row last cell: right border only — closes the row's right edge */
.vine-spreader-subtotal-right-border {
    border-right: 1px solid #ccc !important;
}

/* Add-user-to-group modal: custom listbox replaces native <select> for full colour control */
#addUserToGroupList.vine-user-select-list {
    border: 1px solid #dee2e6;
    border-radius: 4px;
    height: 220px;
    overflow-y: auto;
    font-size: 0.875rem;
    background-color: #fff;
}
.vine-user-select-item {
    padding: 5px 10px;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.vine-user-select-item:hover {
    background-color: #f0f4f2;
}
.vine-user-select-item.selected {
    background-color: var(--vineGreen);
    color: white;
}

.vine-spreader-subtotal-empty-cell {
    border-left: 1px solid transparent !important;
    border-right: 1px solid transparent !important;
}

/* Flex row container shared by the snapshot button and the FP filter control */
.spreader-header-controls {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Custom FP filter dropdown — body-level portal, positioned via JS */
.spreader-fp-filter-btn {
    font-size: 13px;
    font-weight: normal;
    cursor: pointer;
    white-space: nowrap;
    padding: 1px 6px;
    border: 1px solid #bbb;
    border-radius: 4px;
    background: transparent;
    display: inline-block;
    line-height: 20px;
}
.spreader-fp-filter-btn:hover {
    border-color: #888;
    background: #f5f5f5;
}

.spreader-fp-filter-prefix-label {
    font-size: 13px;
    font-weight: normal;
    color: #555;
    white-space: nowrap;
}

/* Subtle document icon overlay on value cells that have a linked statement ref.
   Uses position:absolute so it sits in the left margin without covering right-aligned numbers. */
.vine-has-statement-ref {
    position: relative;
}
.vine-has-statement-ref::before {
    content: '';
    position: absolute;
    left: 3px;
    top: 50%;
    transform: translateY(-50%);
    width: 9px;
    height: 11px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 11'%3E%3Cpath d='M1 0h5l3 3v8H1z' fill='%23dce8f4' stroke='%2390aec0' stroke-width='.9'/%3E%3Cpath d='M6 0l3 3H6z' fill='%23b8d0e4' stroke='%2390aec0' stroke-width='.9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none;
    opacity: 0.7;
    z-index: 1;
}

.spreader-fp-filter-arrow {
    font-size: 9px;
    vertical-align: middle;
}

.spreader-fp-filter-dropdown {
    position: fixed;
    z-index: 99999;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 8px;
    min-width: 120px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    overflow: hidden;
}

.spreader-fp-filter-item {
    display: block;
    padding: 4px 8px;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
}

.spreader-fp-filter-item:hover {
    background: var(--vinePaleGreen);
}

/* CSV export icon button in the spreading sheet header */
.spreader-csv-export {
    cursor: pointer;
    display: inline-block;
    width: 1.7em;
    height: 2em;
    vertical-align: middle;
    position: relative;
    top: 0.08em;
    user-select: none;
    flex-shrink: 0;
    background-image: url("../img/doc-csv.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.spreader-csv-export:hover {
    filter: brightness(0.8);
}

/* Hide-empty toggle button for ENTITY_COLLATERAL sheets */
.spreader-hide-empty-btn {
    cursor: pointer;
    display: inline-block;
    width: 1.5em;
    height: 2em;
    vertical-align: middle;
    position: relative;
    top: 0.08em;
    user-select: none;
    flex-shrink: 0;
    background-image: url("../img/filter.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.55;
}

.spreader-hide-empty-btn:hover {
    opacity: 0.9;
}

.spreader-hide-empty-btn.active {
    opacity: 1;
    filter: brightness(0.6) sepia(1) hue-rotate(180deg);
}

/* ENTITY_COLLATERAL sortable column headers */
.ec-sortable-col {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    position: relative;
}
.ec-sortable-col:hover {
    background-color: #e8edf2 !important;
}
.ec-sort-indicator {
    float: right;
    font-size: 0.7em;
    line-height: 1;
    margin-left: 4px;
    opacity: 0.8;
}

/* ENTITY_COLLATERAL section header rows */
.spreader-entity-collateral-header {
    font-weight: bold;
    background-color: #f0f4f8;
}

.spreader-cell-center {
    text-align: center !important;
}

.btn-close-hide {
    display: none;
}

.spreader-comments-edit .btn-close {
    display: block;
}

.spreader-comments-edit .spreader-comment-save {
    display: block;
}

.spreader-comments-edit .form-floating {
    display: block;
}

.spreader-comments-view-only .btn-close {
    display: none;
}

.spreader-comments-view-only .spreader-comment-save {
    display: none;
}

.spreader-comments-view-only .form-floating {
    display: none;
}

.spreader-cell-prev-comment {
    margin-bottom: 4px;
    padding-left: 8px;
}

.spreader-cell-comments-username {
    font-weight: 700;
}

.spreader-cell-comments-timestamp {
    padding-left: 8px;
    font-style: italic;
}

.spreader-cell-comment-edit {
    background-color: var(--vinePaleGreen) !important;
}

#spreaderCellComments {
    display: none;
    max-width: 300px;
    position: absolute;
    border-style: solid;
    border-width: 1px;
    border-color: lightgray;
    background-color: white;
    border-radius: 8px;
    padding: 8px;
    z-index: 11000;
}

.spreader-previous-comments-hide {
    display: none;
    border-style: none;
}

.spreader-previous-comments-show {
    display: block;
    border-style: none;
}

#spreaderCellComments textarea {
    min-height: 100px;
    border: 1px, black;
    margin-bottom: 8px;
    cursor: pointer;
}

#spreaderCellComments .save-comments {
    float: right;
}

#spreaderCellComments .icon-check {
    filter: var(--vineGreenFilter);
    float: right;
    cursor: pointer;
}

#spreaderCellComments .btn-close {
    float: right;
    margin-bottom: 8px;
    cursor: pointer;
}

.spread-edit-show {
    display: block;
    z-index: 5000;
    left: 500px;
    top: 500px;
    position: absolute;
    background-color: var(--vinePaleGreen);
    height: 300px;
    width: 500px;
}

.spread-edit-hide {
    display: none;
}

.commodity-edit-hide {
    display: none;
}

.commodity-edit-reload {
    content: url("../img/refresh.white.svg");
    padding-right: 0.7em;
    padding-bottom: 0.09em;
}

/* Commodity / Compound Value Editor Styling
Getting the border styled is challenging because jspreadsheet
wraps the table in a bunch of divs with their own borders. So we have to override
those too.
and there are hidden td/border elements too.
Feel free to improve and get a gold star for being clever!
*/
.commodity-value-editor-root {
    position: absolute;
    border: 0;
    z-index: 4000 !important;
}

.commodity-value-editor-root,
.commodity-value-editor-root th,
.commodity-value-editor-root td {
    font-size: 0.875rem;
}

.commodity-value-editor-root table {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

.commodity-value-editor-root table tbody tr:last-child td:nth-child(2) {
    border-bottom-left-radius: 8px;
    border-bottom: 2px solid var(--vineGreenHover) !important;
}

.commodity-value-editor-root table tbody tr:last-child td:last-child {
    border-bottom-right-radius: 8px;
    border-bottom: 2px solid var(--vineGreenHover) !important;
}

.commodity-value-editor-root .jss_border {
    border: 0;
}

.commodity-value-editor-root .jss_content {
    border: 0;
    box-shadow: none;
}

.commodity-value-editor-root thead tr:first-child th {
    border-top-right-radius: 8px;
    border-top-left-radius: 8px;
    border-left: 2px solid var(--vineGreenHover) !important;
    border-top: 2px solid var(--vineGreenHover) !important;
}

.commodity-value-editor-root thead th {
    background-color: var(--vineGreenHover) !important;
    color: white;
}

.commodity-value-editor-root tbody tr td:nth-child(2) {
    border-left: 2px solid var(--vineGreenHover) !important;

}

.commodity-value-editor-root tbody tr td:last-child {
    border-right: 2px solid var(--vineGreenHover) !important;
}

.commodity-editor-close-btn {
    float: right;
    cursor: pointer;
    font-size: larger;
    padding: right 0.3em;
    display: flex;
    align-items: center;
}

.saved-component-value {
    background-color: var(--vinePaleGreen) !important
}

.default-component-value {
    background-color: khaki !important;
}

.formula-component-value {
    background-color: lightgrey !important;
}

.commodity-editor-selected-cell {
    border-color: black !important;
}


/* End Commodity / Compound Value Editor Styling */

.click-outside-handler {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
}

.spreader-popup-display {
    display: block;
    z-index: 5000;
    left: 500px;
    top: 500px;
    position: absolute;
}

/* Historical Snapshot Viewer */
.historical-snapshot-hide {
    display: none !important;
}

.historical-snapshot-viewer-root {
    position: absolute;
    z-index: 5100;
    background: white;
    border: 2px solid var(--vineGreenHover);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
    padding: 0;
    min-width: 420px;
}

.historical-snapshot-viewer-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5em;
    position: relative;
    padding: 0.4em 0.7em;
    background: var(--vineGreenHover);
    color: white;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

.historical-snapshot-instance-label {
    font-weight: bold;
    flex: 1;
}

.historical-snapshot-dates {
    font-style: italic;
    font-size: 0.9em;
}

.historical-snapshot-dates-clickable {
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 0.12em;
}

.historical-snapshot-date-search {
    display: none;
    position: absolute;
    top: calc(100% - 2px);
    right: 4.8em;
    width: 220px;
    background: white;
    color: #333;
    border: 1px solid #c6d4cb;
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
    overflow: hidden;
}

.historical-snapshot-date-search-close {
    position: absolute;
    top: 0.28em;
    right: 0.32em;
    border: 0;
    background: transparent;
    color: #6c7d74;
    font-size: 0.95em;
    line-height: 1;
    padding: 0.2em;
}

.historical-snapshot-date-search-close:hover {
    color: #2c3f35;
}

.historical-snapshot-date-search-open {
    display: block;
}

.historical-snapshot-date-input {
    width: 100%;
    border: 0;
    border-bottom: 1px solid #dfe7e2;
    padding: 0.45em 1.6em 0.45em 0.6em;
    outline: none;
    color: #222;
}

.historical-snapshot-date-results {
    max-height: 220px;
    overflow-y: auto;
}

.historical-snapshot-date-results-summary {
    padding: 0.4em 0.6em;
    font-size: 0.78em;
    color: #6c7d74;
    background: #f6f8f7;
    border-bottom: 1px solid #dfe7e2;
}

.historical-snapshot-date-empty {
    padding: 0.7em 0.6em;
    font-size: 0.86em;
    color: #6c7d74;
}

.historical-snapshot-date-option {
    width: 100%;
    border: 0;
    background: white;
    color: inherit;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0.8em;
    padding: 0.45em 0.6em;
    text-align: left;
}

.historical-snapshot-date-option:hover,
.historical-snapshot-date-option-selected {
    background: var(--vinePaleGreen);
}

.historical-snapshot-date-option-label {
    font-size: 0.94em;
    white-space: nowrap;
}

.historical-snapshot-date-option-value {
    font-size: 0.86em;
    color: #6c7d74;
    white-space: nowrap;
    margin-left: auto;
}

.historical-snapshot-nav {
    cursor: pointer;
    padding: 0 0.3em;
    font-size: 1.1em;
}

.historical-snapshot-nav:hover {
    opacity: 0.75;
}

.historical-snapshot-reset {
    cursor: pointer;
    display: inline-block;
    margin-left: 0.15em;
}

.historical-snapshot-reset:hover {
    opacity: 0.75;
}

.historical-snapshot-close {
    cursor: pointer;
    padding: 0 0.2em;
    font-size: 1.1em;
    margin-left: 0.3em;
}

.historical-snapshot-close:hover {
    opacity: 0.75;
}

.historical-snapshot-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92em;
}

.historical-snapshot-table td {
    padding: 0.25em 0.6em;
    border-bottom: 1px solid #eee;
    vertical-align: top;
}

.historical-snapshot-label-cell {
    font-weight: normal;
    width: 50%;
    color: #444;
}

.historical-snapshot-value-cell {
    width: 50%;
}

.historical-snapshot-tracked {
    background-color: lightgrey;
}

.historical-snapshot-fixed {
    background-color: var(--vinePaleGreen);
}

.historical-snapshot-unavailable {
    color: #8a948f;
    font-style: italic;
}

.historical-snapshot-no-data {
    padding: 0.8em;
    color: #888;
    font-style: italic;
}

.vine-cell-approximate-date {
    font-style: italic;
    color: var(--vineTextMuted, #888) !important;
}

.vine-cell-no-history-data {
    opacity: 0.45;
}
/* End Historical Snapshot Viewer */

/* Popup target cell highlight — applied to the base sheet cell that triggered a popup */
/* td qualifier raises specificity above .vine-sheet-editable */
td.vine-popup-target-cell {
    background-color: var(--vinePaleGreen) !important;
}



.vine-spreader-table-row {
    display: flex;
    flex-direction: row;
    width: calc(90vw);
}

.spreader-note-label {
    font-weight: 700;
    margin-top: 1.5em;
    margin-bottom: 0.5em;
}

.spreader-note-label span {
    margin-right: 0.3em;
}

.spreader-note-textarea {
    border-radius: 8px;
    width: 100%;
    padding: 0.5em;
    font-size: larger;
}

#spreader-note-char-counter {
    font-weight: 100;
}

.spreader-note-error {
    font-weight: 700 !important;
    color: red;
}

.snapshot-row-highlight {
    background: url("data:image/jpg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/4gHYSUNDX1BST0ZJTEUAAQEAAAHIAAAAAAQwAABtbnRyUkdCIFhZWiAH4AABAAEAAAAAAABhY3NwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAA9tYAAQAAAADTLQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlkZXNjAAAA8AAAACRyWFlaAAABFAAAABRnWFlaAAABKAAAABRiWFlaAAABPAAAABR3dHB0AAABUAAAABRyVFJDAAABZAAAAChnVFJDAAABZAAAAChiVFJDAAABZAAAAChjcHJ0AAABjAAAADxtbHVjAAAAAAAAAAEAAAAMZW5VUwAAAAgAAAAcAHMAUgBHAEJYWVogAAAAAAAAb6IAADj1AAADkFhZWiAAAAAAAABimQAAt4UAABjaWFlaIAAAAAAAACSgAAAPhAAAts9YWVogAAAAAAAA9tYAAQAAAADTLXBhcmEAAAAAAAQAAAACZmYAAPKnAAANWQAAE9AAAApbAAAAAAAAAABtbHVjAAAAAAAAAAEAAAAMZW5VUwAAACAAAAAcAEcAbwBvAGcAbABlACAASQBuAGMALgAgADIAMAAxADb/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/2wBDAQMDAwQDBAgEBAgQCwkLEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBD/wAARCAAIAAgDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAn/xAAhEAAABQIHAAAAAAAAAAAAAAAAAQMEYQUxAhITI0FCcf/EABUBAQEAAAAAAAAAAAAAAAAAAAQF/8QAHBEAAAcBAQAAAAAAAAAAAAAAAAECAwQREiFB/9oADAMBAAIRAxEAPwCmleoOvmfMcG5dRMu8lMc+3AABIYRqy9FSLJcJGT7Q/9k=");
    background-repeat: no-repeat;
    background-position: top right;
}

/* Read-only cells */
.vine-sheet-readonly {
    background-color: white;
    color: darkslategray !important;
}

/* Editable cells, added so it's easier to style them separate from Read-only */
.vine-sheet-editable {
    background-color: aliceblue !important;
    color: darkslategray !important;
}

.vine-spreader-adjusted {
    color: var(--vineGreen) !important;
    /* color: rgb(14, 175, 6) !important; */
}

.vine-spreader-non-adjusted {
    color: black !important;
}

.vine-sheet-emphasize {
    font-weight: 600 !important;
    color: black !important;
}

.vine-spreader-empty-row {
    height: 1.8em !important;
}

/* the TD holding the spreader table */
.vine-spreader-table-td {
    order: 1;
    flex: 0 0 auto;
}

/* the TD holding the doc viewer */
.vine-spreader-doc-viewer-td {
    order: 2;
    flex: 0 1 auto;
    /* The flex-shrink: 1 is important to enable scrolling */
    overflow: scroll;
}

.spreader-doc-view-floating {
    position: fixed;
    top: 7rem;
    right: 2rem;
    z-index: 1200;
    display: flex;
    flex-direction: column;
    width: min(50vw, 860px);
    height: min(78vh, 920px);
    min-width: 360px;
    min-height: 420px;
    max-height: calc(100vh - 8rem);
    overflow: visible;
}

.spreader-doc-view-shell {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    flex-direction: column;
    background: #fff;
    border: 1px solid #c9d1c8;
    border-radius: 12px;
    box-shadow: 0 18px 40px rgba(35, 52, 40, 0.18);
    overflow: hidden;
}

.spreader-doc-view-handle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    background: linear-gradient(180deg, #eef4eb 0%, #e4ede0 100%);
    border-bottom: 1px solid #d4ddd1;
    cursor: move;
    user-select: none;
}

.spreader-doc-view-handle-title {
    font-weight: 700;
    color: #233428;
    flex: 1 1 auto;
}

.spreader-doc-view-pin-btn {
    flex: 0 0 auto;
    background: none;
    border: none;
    padding: 0 0.15rem;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    opacity: 0.55;
    transition: opacity 0.15s, transform 0.25s;
    transform: rotate(0deg);
}

.spreader-doc-view-pin-btn:hover {
    opacity: 1;
}

/* Pinned: icon upright, full opacity */
.spreader-doc-view-pin-btn.spreader-doc-view-pinned {
    opacity: 1;
    transform: rotate(0deg);
}

/* Unpinned: icon tilted 45°, dimmed */
.spreader-doc-view-pin-btn.spreader-doc-view-unpinned {
    opacity: 0.4;
    transform: rotate(45deg);
}

/* Spring-press animation for clicking the pin when already pinned */
@keyframes spreader-pin-press {
    0%   { transform: rotate(0deg) scale(1);    }
    15%  { transform: rotate(0deg) scale(0.55); }
    55%  { transform: rotate(0deg) scale(1.35); }
    75%  { transform: rotate(0deg) scale(0.9);  }
    100% { transform: rotate(0deg) scale(1);    }
}

.spreader-doc-view-pin-btn.spreader-doc-view-pin-press {
    animation: spreader-pin-press 0.45s ease-out both;
    transition: none;
}

.spreader-doc-view-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: 0.5rem 0.75rem 1.25rem;
    background: #f8faf7;
    position: relative;
    /* Force classic always-visible scrollbars in Chromium/Edge on Windows.
       Defining ::-webkit-scrollbar opts the element out of Windows overlay-scrollbar
       mode so the scrollbars are visible without requiring a hover. */
    scrollbar-width: thin;               /* Firefox */
    scrollbar-color: rgba(45,70,50,0.35) transparent; /* Firefox */
}
.spreader-doc-view-body::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
.spreader-doc-view-body::-webkit-scrollbar-track {
    background: transparent;
}
.spreader-doc-view-body::-webkit-scrollbar-thumb {
    background: rgba(45, 70, 50, 0.35);
    border-radius: 4px;
}
.spreader-doc-view-body::-webkit-scrollbar-thumb:hover {
    background: rgba(45, 70, 50, 0.55);
}

.spreader-doc-view-loading-msg {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8faf7;
    font-style: italic;
    color: #aaa;
    font-size: 0.95em;
    z-index: 2;
    pointer-events: none;
}

.spreader-doc-view-loading-hide {
    display: none;
}

.spreader-doc-view-resize-handle-right {
    position: absolute;
    top: calc(50% - 36px);
    right: -12px;
    width: 14px;
    height: 72px;
    cursor: ew-resize;
    z-index: 2;
    border-radius: 8px;
    background: linear-gradient(90deg, rgba(124, 141, 127, 0.08) 0 30%, rgba(124, 141, 127, 0.28) 30% 100%);
}

.spreader-doc-view-resize-handle-bottom {
    position: absolute;
    left: calc(50% - 36px);
    bottom: -12px;
    width: 72px;
    height: 14px;
    cursor: ns-resize;
    z-index: 2;
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(124, 141, 127, 0.08) 0 30%, rgba(124, 141, 127, 0.28) 30% 100%);
}

.spreader-doc-view-zoom-controls {
    display: none; /* hidden until a doc is open — see :has() rule below */
    align-items: center;
    flex: 0 0 auto;
    background: rgba(45, 70, 50, 0.08);
    border: 1px solid rgba(45, 70, 50, 0.2);
    border-radius: 7px;
    overflow: hidden;
}

/* Show zoom controls only when the doc container is visible (a PDF/image is open) */
.spreader-doc-view-shell:has(#spreaderDocViewDocContainer:not(.doc-container-hide)) .spreader-doc-view-zoom-controls {
    display: flex;
}

/* Show page counter and close-doc button only when a doc is open */
.spreader-doc-view-page-count,
.spreader-doc-view-close-doc-btn {
    display: none;
}
.spreader-doc-view-shell:has(#spreaderDocViewDocContainer:not(.doc-container-hide)) .spreader-doc-view-page-count,
.spreader-doc-view-shell:has(#spreaderDocViewDocContainer:not(.doc-container-hide)) .spreader-doc-view-close-doc-btn {
    display: flex;
    align-items: center;
}

/* Hide nav buttons (‹ ›) until it's a PDF — toggled via .spreader-doc-view-pdf-open */
#spreaderDocViewPrevBtn,
#spreaderDocViewNextBtn {
    display: none;
}
.spreader-doc-view-pdf-open #spreaderDocViewPrevBtn,
.spreader-doc-view-pdf-open #spreaderDocViewNextBtn {
    display: flex;
}

/* ‹ › glyphs sit lower than −/+ math symbols — nudge them up to align optically */
#spreaderDocViewPrevBtn,
#spreaderDocViewNextBtn {
    transform: translateY(-1px);
}

/* Page counter label */
.spreader-doc-view-page-count {
    font-size: 0.75rem;
    color: #3a5040;
    opacity: 0.8;
    white-space: nowrap;
    margin-left: 0.35rem;
    flex: 0 0 auto;
}

/* Close-doc button */
.spreader-doc-view-close-doc-btn {
    background: none;
    border: none;
    border-radius: 4px;
    width: 1.5rem;
    height: 1.25rem;
    padding: 0;
    cursor: pointer;
    font-size: 0.8rem;
    line-height: 1;
    color: #3a5040;
    justify-content: center;
    transition: background 0.1s;
    flex: 0 0 auto;
}
.spreader-doc-view-close-doc-btn:hover {
    background: rgba(45, 70, 50, 0.12);
}
.spreader-doc-view-close-doc-btn:active {
    background: rgba(45, 70, 50, 0.22);
}

.spreader-doc-view-zoom-btn {
    background: none;
    border: none;
    border-right: 1px solid rgba(45, 70, 50, 0.15);
    width: 1.85rem;
    height: 1.25rem;
    padding: 0;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1;
    color: #3a5040;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.1s;
}

.spreader-doc-view-zoom-btn:last-child {
    border-right: none;
}

.spreader-doc-view-zoom-btn:hover {
    background: rgba(45, 70, 50, 0.12);
}

.spreader-doc-view-zoom-btn:active {
    background: rgba(45, 70, 50, 0.22);
}

.spreader-doc-view-floating .spread-data-room-label {
    margin-bottom: 0.5rem;
}

.spreader-doc-view-floating .dataroom-browser,
.spreader-doc-view-floating .doc-container-hide {
    max-width: 100%;
}

/* Body pager and close button are replaced by the header controls in the floating panel */
.spreader-doc-view-floating .doc-pager {
    display: none !important;
}
.spreader-doc-view-floating .doc-container-close {
    display: none !important;
}

.spreader-doc-view-floating .doc-render-canvas {
    max-width: none;
}

/* Drag-to-pan cursor: grab on hover, grabbing while panning */
.spreader-doc-view-body .doc-render-canvas {
    cursor: grab;
}
.spreader-doc-view-body.doc-viewer-panning .doc-render-canvas {
    cursor: grabbing !important;
}
.spreader-doc-view-body.doc-viewer-panning {
    user-select: none;
}

@media only screen and (max-width: 960px) {
    .spreader-doc-view-floating {
        top: 5.5rem;
        right: 1rem;
        left: 1rem;
        width: auto;
        height: calc(100vh - 6.5rem);
        min-width: 0;
        min-height: 0;
        max-height: calc(100vh - 6.5rem);
    }
}

.spreaderTable td {
    vertical-align: top;
    /*border: 1px solid lightgray */
    /* no border please */
    padding-right: 2rem;
}

.spreaderTable td:nth-child(2) {
    padding-left: 8px;
    min-width: 22rem;
    /* About 350px */
}

.fancytree-container {
    border: 0 !important;
    font-size: inherit;
    background-color: transparent !important;
    /* Overrride Fancytree so the border doesn't get clipped */
}

/* Commented out because this may be what's preventing the cursor 
   from changing when code needs it to */
/* .fancytree-container span { cursor: pointer; } */

/* hide the fancy tree drop marker (arrow over doc)
by putting it at the back of the UI*/
.fancytree-drop-marker-hide {
    z-index: 0;
}

.vine-dataroom-filename {
    width: 15rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Wrapper for the chevron, icon, and filename so we 
   can control the width and lay them out as a group */
.fancytree-node-first-column-wrapper {
    width: 20rem;
    /* consistent width to try to keep the columns in line with each other */
    min-width: 20rem;
}

.fancytree-node-container {
    display: flex;
    align-items: flex-start;
    flex-wrap: nowrap;
}

.fancytree-node-extra-column-wrapper {
    margin-left: 0.5rem;
    /* width: 60%; */
    /* This is messing up layout when used with flex */
}

.fancytree-node-extra-columns {
    display: flex;
    justify-content: space-around;
}

.fancytree-node-column-content {
    display: flex;
    align-items: flex-start;
    width: 20rem;
    /* consistent width to try to keep the columns in line with each other */
    min-width: 20rem;
}

/* First column needs to align left, the rest of the columns 
   need to put space around them within the rest of the space */
.vine-dataroom-browser-column-header-row {
    display: flex;
    align-items: flex-start;
    flex-wrap: nowrap;
    padding: 0 0.5rem 0.25rem 0.5rem;
}

/* have the Name label appear over the doc icon, not the expand control*/
.vine-dataroom-browser-column-header-row div:first-child {
    padding-left: 2.7em;
}


.vine-dataroom-browser-column-header {
    display: flex;
    align-items: flex-start;
    /* Align left within the column cell */
    font-weight: 700;
    width: 20rem;
    /* consistent width to try to keep the columns in line with each other */
    min-width: 20rem;
}

.vine-dataroom-browser-column-header-extra-wrapper {
    display: flex;
    justify-content: space-around;
}

/* Hide the extra columns for smaller screens */
@media (max-width: 1048px) {
    .vine-dataroom-browser-column-header-extra-wrapper {
        display: none;
    }

    .fancytree-node-extra-column-wrapper {
        display: none;
    }
}

/* The PDF viewer */
.doc-render-canvas {
    min-width: 22rem;
}

/* The table containing the spreadsheet */
#spreaderTableWrapper {
    min-width: 22rem;
}

.doc-browser-hide {
    display: none !important;
}

.doc-container-hide {
    display: none !important;
}

.doc-container-close {
    float: right;
}

.doc-pager {
    text-align: center;
}

.doc-pager .icon-chevron-right {
    margin-left: 90px;
}

.doc-page-num {
    position: absolute;
    padding-top: 0.15em;
}

.spreadingContentTabs {
    float: right;
}

.spreadingTabs {
    overflow: hidden;
    /* border: 1px solid #ccc;  */
    /*background-color: #f1f1f1;*/
    background-color: var(--vineGreenHover);
    /* border-radius needs to match spreadingTabContent */
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
}

/* Style the buttons that are used to open the tab content */
.spreadingTabs button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
    color: whitesmoke;
}

/* Change background color of buttons on hover */
.spreadingTabs button:hover {
    background-color: var(--vineGreen);
    /* background-color: #ddd;*/
}

/* Create an active/current tablink class */
.spreadingTabs button.active {
    font-weight: bold;
    background-color: var(--vineGreen);
    /* background-color: #ccc;*/
}

/* Style the tab content */
.spreadingTabContent {
    display: none;
    padding: 6px 12px;
    border: 3px solid var(--vineGreen);
    /* border: 1px solid #ccc; */
    border-top: none;
    /* Border radius needs to match spreadingTabs */
    border-bottom-left-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
}

.dropdown-cascade {
    cursor: pointer;
    min-width: auto;
}

/*Record path through cascading menu*/
.cascading-menu-root ul>li:hover {
    background-color: var(--vinePaleGreen);
}

/*highlight the item under the pointer*/
.cascading-menu-root .dropdown-item:hover {
    background-color: var(--vinePaleGreen);
}

/*NO highlight for menu header*/
.cascading-menu-root .dropdown-header:hover {
    background-color: white !important;
}

.dropdown-cascade .dropdown-header {
    font-size: revert;
    font-style: italic;
}

/*Styling for JSpreadsheet implementation
Prevent default greying out for readonly cells
*/
.jexcel tbody tr td.readonly {
    color: revert;
}

/*Make spreading sheets headers sticky*/

.spreadingTabs {
    position: sticky !important;
    top: 0 !important;
    z-index: 3 !important;
}

#spreader thead {
    position: sticky !important;
    top: 48px !important;
    z-index: 5 !important;
}

/* Override JSpreadsheet to change the background color */
.jss>thead>tr>td {
    background-color: white;
}

.jss>tbody>tr>td {
    background-color: white;
}

/* Put a color on the second header row, with the labels for the columns */
.jss>thead>tr:nth-child(2)>td {
    background-color: var(--vineGreenHover);
    font-weight: 600;
    color: white;
}

/*Comments flag for spreader, overrides jspreadsheet native icon*/
.jss tbody tr td[data-comment] {
    background: url("data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAgAAAAIBAMAAAA2IaO4AAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAJ1BMVEUAAKsAAJ4AAK4AAP////8AFcUAWNYAbNsALcsAM8sAW9YAC8IAAABP0/RsAAAABHRSTlMAAAAAs5NmmgAAAAFiS0dEDIGzUWMAAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfnAxsQBjhlU5e8AAAALUlEQVQI12NwTS8vZ2BpAxJCnsvLGQxVppUzGAt5pDMYG6q0MRgbC3gDCUMXANXNCYz6DdrFAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDIzLTAzLTI3VDE2OjA2OjUxKzAwOjAwYRRulQAAACV0RVh0ZGF0ZTptb2RpZnkAMjAyMy0wMy0yN1QxNjowNjo1MSswMDowMBBJ1ikAAAAASUVORK5CYII=");
    background-repeat: no-repeat;
    background-position: top right;
    background-color: white;
}

/* TODO can this and jss > thead > tr > td be combined? */
.jexcel thead tr td {
    text-align: center !important;
    font-weight: 500;
}

/* Round the corners at the top of the spreadsheet inside the tab content */
/* NOTE changes to the structure of the table including hidden columns can affect this */
.jexcel>thead>tr:nth-child(1)>td:nth-child(2) {
    border-top-left-radius: 0.5rem;
}

.jexcel>tbody>tr:last-child {
    border-bottom-left-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
}

/* Each row's bottom visual line comes from the NEXT row's border-top.
   The last row has no next row so give its cells an explicit border-bottom,
   matching the 1px #ccc divider visible between all other rows.
   The jspreadsheet tfoot (add-row control) is removed from the DOM in
   injectSpreadingDataIntoSheet() — see spreader.js — because jspreadsheet
   sets inline display styles that prevent CSS-only suppression. */
.spreadingTabContent .jss > tbody > tr:last-child > td {
    border-bottom: 1px solid #ccc !important;
}

/* showCollapsedSpreaderView() stores expanded column definitions in a
   <colgroupExpand> custom element appended directly to the <table>.
   Because it is not a valid table-model element, the browser wraps it
   in anonymous table-row / table-row-group boxes that add unwanted
   height below <tbody>.  Hiding it eliminates that extra space while
   keeping the element accessible to JS (getElementsByTagName, children,
   cloneNode all work on display:none elements). */
.spreadingTabContent .jss > colgroupexpand {
    display: none;
}

.vine-show-sourcedoc-cell-highlight {
    color: black !important;
    font-weight: 700 !important;
    background-color: var(--vineGreenHover) !important;
}

.formula-display-enhance {
    font-weight: 700;
}

.formula-component-source {
    border: 3px solid var(--vineGreen) !important;
}

.vine-formula-cell-highlight {
    color: black !important;
    font-weight: 700 !important;
    background-color: var(--vineGreenHover) !important;
}

.vine-formula-cell-component-highlight {
    background-color: var(--vinePaleGreen) !important;
}

/*when displaying a cell address over a source cell when viewing a formula and source cells*/
.cell-address-display {
    height: 0;
    position: relative;
    z-index: 2000;
    max-width: 5em;
    padding-left: 8px;
}

.formula-display {
    position: absolute;
    background-color: white;
    border-radius: 8px;
    z-index: 2000;
    min-width: 150px;
    box-shadow: 0px 0px 10px 3px lightgray;
}

.formula-display-close {
    position: absolute;
    top: 0;
    right: 0;
    padding: 8px;
    font-weight: 500;
}

.formula-display-text {
    margin-top: 25px;
    margin-bottom: 8px;
    padding: 8px;
    max-width: 1000px;
    word-wrap: anywhere;
}


/*Context menu styling for use of jspreadsheet
We copy the fully baked jspreadhseet generated context
menu and insert it in a different place
*/

.vine-hide-contextmenu {
    display: none !important;
    z-index: 0;
}

.vine-show-contextmenu {
    position: absolute;
    background-color: white;
    border-radius: 8px;
    display: block;
    z-index: 2000;
    min-width: 150px;
    box-shadow: 0px 0px 10px 3px lightgray;
}

.vine-contextmenu-list-container {
    margin-top: 8px;
    margin-bottom: 8px;
}

.vine-contextmenu-title {
    margin-left: 8px;
    margin-right: 8px;
    color: gray;
    font-style: italic;
}

/* See note below, adjusted to be the same as current Bootstrap settings */
.modal:nth-of-type(even) {
    z-index: 1055 !important;
}

/* Bootstrap apparently adjusted some of their modals to 1055, 
   so put our backdrop behind that */
.modal-backdrop.show:nth-of-type(even) {
    z-index: 1049 !important;
}

/*Use 'vine-table-hover' class instead of Bootstrap table-hover*/
.vine-table-hover>tbody>tr:hover td {
    background-color: rgb(227, 227, 228);
}

/*Some tables need row hover
set at row level so it can be explictly
removed. Use this when table rows have nested tables
inserted and removed from them*/
tr.hover-row:hover {
    background-color: rgb(227, 227, 228);
}

/* Reduces the gray hover highlight on parent when inline view is expanded.
There are still issues with the border top and bottom still being gray. */
tr.hover-row:hover .vine-header-row-expanded {
    border-bottom: white solid 1px;
    border-top: white solid 1px;
    background-color: white;
}

/*A row that contains a section header*/
.vine-header-row-expanded {
    border-bottom: lightgray solid 1px;
    border-top: lightgray solid 1px;
}

.vine-header-row-collapsed {
    border-bottom: none;
    border-top: none;
}

.vine-add-new-grouped-fact-icon {
    display: block;
    font-size: large;
}

.grouped-fact-container {
    display: inline-block;
    width: 100%;
}

.gfl-view-link {
    content: url("../img/chevron-right.svg");
}

.gfl-view-link-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

/*styling for an indented widget such
as when opened within another container like a View
For now is fixed but might need to be dynamic because of
stacked indents
*/
.widget-indent {
    margin-left: 25px;
}

/*define bootstrap <td> default styling here
so it can be explicitly used in <table>s generated
on the server to match tables generated in the client
such as list table.*/
.widget-td-bootstrap-default {
    padding: 0.5rem !important;
}

/*One column widget*/
.widget-simple-two-column {
    border: 0;
}

.widget-simple-one-column {
    border: 0;
}

.widget-simple-one-column .vine-boolean-wrapper {
    padding-left: 1em !important;
    padding-top: 0.7em !important;
}


.widget-simple-one-column .vine-edit-label {
    padding-top: 1em;
    min-width: -webkit-max-content !important;
    width: auto;
}

.widget-simple-one-column .vine-edit-label * {
    max-width: none;
    width: auto;
}

.widget-simple-one-column .vine-display-value-span-wrapper * {
    max-width: none;
}

.two-col-timestamp {
    font-size: small;
    color: gray;
}

/*Set the max width of the edit fact dialogue
if it contains a simple 2 col widget*/
.modal-dialog:has(.widget-simple-two-column) {
    max-width: 700px;
}

/*Change the overflow prop for the edit
fact modal to make the internal borders cleaner*/
#editFactModal .modal-body {
    overflow: auto;
}

/*width of rich text editor when in fact editor*/
#editFactModal .vine-rich-text-editor-container {
    width: 100%;
    max-width: revert;
}

.modal-content-hide {
    display: none;
}

.two-col-timestamp-spacer {
    height: 2em;
}

.widget-simple-3-lines-content {
    display: inline-block;
    width: 100%;
    /* padding-left: 8px; */
    /* indent now handled by the outer container */
}

.widget-simple-3-lines-content table {
    width: 50%;
}

.widget-simple-3-lines-label {
    display: inline-block;
    padding-right: 10px;
}

/*Contents of a select field*/
.vine-select-style {
    text-decoration: none;
    color: black;
    display: block;
}

.vine-select-style:hover {
    text-decoration: none;
    color: black;
    display: block;
}

/*The 'saving...' text that appears when data
 is being saved*/
.vine-saving-data {
    float: right;
    font-style: italic;
    color: gray;
    text-transform: uppercase;
}

.vine-dropdown-menu-container {
    min-width: 200px;
    box-shadow: 0px 0px 10px 3px lightgray;
    max-height: 25em;
    max-width: 25em;
    overflow: auto;
}

/* The TopNav dropdown menu isn't laying out correctly */
.vine-dropdown-menu-topnav {
    position: relative !important;
    left: 1;
    /* Override dropdown-menu left:0 */
}

.missing-info-emphasis {
    font-style: italic;
}

/*milestone controls are hidden when fields are in edit/delete mode
 this style ensures the space they would otherwise occupy remains 
 and avoids other controls expanding to fill the void*/
.milestone-outer-container {
    display: inline-block;
    min-width: 30px;
}

/*when an input field has the focus this overrides
 the default behaviour of an emphasized border*/
input:focus {
    outline: none;
    border: 0;
    background: inherit;
}

.vine-action-menu {
    display: inline-block;
    min-width: 2.5em;
    min-height: 2em;
    position: relative;
    vertical-align: middle;
}

/*Action menu item layout - flexbox for consistent icon/label alignment across rows*/
.action-menu-item-container {
    display: flex;
    align-items: center;
    gap: 0.5em;
    white-space: nowrap;
}

.action-menu-item-label {
    flex: 1;
}

.action-menu-icon {
    flex-shrink: 0;
    width: 1.2em;
    text-align: center;
}

.are-you-sure {
    min-width: 200px;
    float: right;
}

/*base styling for the column containing data values
in a list table view*/
.vine-list-table-data-col {
    display: inline-block;
}

/*Common to all rows in tables if specified */
.vine-row {
    vertical-align: middle;
}

.vine-search-field-input-span {
    width: 400px;
    display: inline-block;
    border: 1px solid lightgray;
    border-radius: 8px;
    padding-left: 7px;
    padding-top: 5px;
    padding-bottom: 0px;
    min-height: 41px;
    background: white;
    cursor: pointer;
    z-index: 0;
}

.vine-search-field-input {
    border: 0;
    width: 360px;
}

.vine-highlight-search {
    font-weight: 900;
}

.vine-clear-search {
    float: right;
    margin-right: 8px;
    color: grey;
}

/* In Views, make a display value look like it's in an editable field. 
This style is also used for input fields paired with a display value span 
to disguise transition between display span and input field*/
.vine-display-value-span {
    /* width: 400px; */
    /* We can't make it a fixed width because it's used in different situations */
    /*width: 100%;*/
    /* Use 100% of the space our parent (e.g. <TD>) gives us */
    /* We can't width 100% because vine-editicons is in the TD and wrapper span with us */
    /* Flex space-between aligns the two items one on the far left the other on the far right */
    width: 90%;
    /* Leave room for vine-editicons */
    max-width: 25rem;
    /* about 400px */
    display: inline-block;
    border: 1px solid lightgray;
    border-radius: 8px;
    padding-left: 7px;
    padding-top: 8px;
    padding-bottom: 8px;
    min-height: 48px;
    background: white;
    cursor: pointer;
    z-index: 0;
    order: 1;
    /* for display: flex */
}

/* The span wrapping around the display-value-span. 
   We use it to adjust the layout of the contents, 
   vine-display-value-span and vine-editicons */
.vine-display-value-span-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: nowrap;
}

/*styling for field in edit mode*/
.vine-display-value-span-edit {
    width: 100%;
    max-width: 25rem;
    display: inline-block;
    border: 0;
    border-radius: 8px;
    position: static;
    padding-left: 7px;
    padding-top: 8px;
    padding-bottom: 8px;
    min-height: 48px;
    background: white;
    box-shadow: 0 0 5px 3px rgb(151, 188, 141);
}

/*alert styling for field in edit mode*/
.vine-display-value-span-alert {
    width: 400px;
    display: inline-block;
    border: 0;
    border-radius: 8px;
    position: static;
    padding-left: 7px;
    padding-top: 8px;
    padding-bottom: 8px;
    min-height: 48px;
    background: white;
    z-index: 0;
    animation-name: edit-field-alert;
    animation-duration: 0.25s;
    animation-iteration-count: 3;
}

.display-value-inner-span {
    max-width: 355px;
    display: inline-block;
    overflow-wrap: anywhere;
}

@keyframes edit-field-alert {
    from {
        box-shadow: 0 0 5px 3px rgb(151, 188, 141);
    }

    50% {
        box-shadow: 0 0 5px 3px rgb(215, 53, 31);
    }

    to {
        box-shadow: 0 0 5px 3px rgb(151, 188, 141);
    }
}

/*is a child of vine-display-value-span
 need to occupy full space and have no background*/
.vine-number-display-span-style {
    display: inline-block;
    height: 100%;
    background: white;
    margin-left: 3px;
}

/*is a child of vine-display-value-span
 need to occupy full space and have no background*/
.vine-number-input-style {
    border: 0;
    margin-left: 3px;
    width: 95%;
}

.vine-text-input-style {
    border: 0;
    width: 95%;
}

.vine-date-input-style {
    border: 0;
    width: 0px;
}

/* Vine green overrides for js-datepicker */
.qs-datepicker-container .qs-controls {
    background-color: var(--vineGreen, #35744b);
}

.qs-datepicker-container .qs-arrow.qs-left:after {
    border-right-color: #fff;
}

.qs-datepicker-container .qs-arrow.qs-right:after {
    border-left-color: #fff;
}

.qs-datepicker-container .qs-month-year {
    color: #fff;
}

.qs-datepicker-container .qs-square:not(.qs-empty):hover {
    background-color: var(--vinePaleGreen, #c8ffc7);
}

.qs-datepicker-container .qs-active,
.qs-datepicker-container .qs-range-end,
.qs-datepicker-container .qs-range-start {
    background-color: var(--vineGreen, #35744b);
    color: #fff;
}

/*Doc link text style, to make it look like a basic text link*/
.vine-open-file-link-text {
    color: blue;
    text-decoration: underline;
    font-style: italic;
}

/*JOS*/
.vine-inline-icon {
    display: inline;
    padding-left: 30px;
    position: relative;
}

.vine-inline-icon:before {
    content: "";
    background-size: 20px 20px;
    position: absolute;
    width: 20px;
    height: 20px;
    margin-left: -30px;
    margin-top: 2px;
}

.action-menu-delete-span-hidden {
    display: none;
}

/*CSS for inserting icons
See https://isotropic.co/tool/hex-color-to-css-filter/
to convert hex color to filter
Wiki free images here: https://commons.wikimedia.org/wiki/Category:Colored_flag_icons
Resize an image: https://onlinepngtools.com/resize-png
Recolor a png: https://onlinepngtools.com/change-png-color
*/

.milestone-property-picker-hide {
    display: none;
}

.milestone-property-picker-show {
    display: block;
    background-color: white;
    position: absolute;
    z-index: 200;
}

.milestone-property-picker-table {
    display: block;
    padding: 8px;
}

.milestone-property-picker-table table {
    width: 100%;
}

.milestone-property-picker-title {
    display: block;
    padding-top: 8px;
    padding-left: 8px;
    padding-right: 8px;
}

.milestone-control {
    position: relative;
}

.milestone-control .card {
    display: none;
    z-index: 3;
    width: 250px !important;
}

.vine-assignee-icon-container {
    display: inline-block;
    min-width: 25px;
}

.milestone-control:hover .card {
    display: block;
    width: max-content;
    position: absolute;
    right: 0%;
    top: -25%;
}

.vine-milestone-flag {
    font-size: 1rem !important;
    z-index: 1;
    margin-left: 10px;
}

.assigneeDropdownUi {
    position: relative;
    top: -25px;
}

/*Styling for combined assignee and label field*/
.assignee-label-field .fact-label {
    margin-left: 10px;
    margin-right: 20px;
}

/*Styling for assignee controls*/
.assignee-control {
    position: relative;
    min-width: 25px;
}

.display-block {
    display: block !important;
}

.assignee-control .assignee-details {
    display: none;
    border-radius: 8px;
    background: white;
    box-shadow: 0px 0px 10px 3px lightgray;
    width: max-content;
    min-width: 200px;
    position: absolute;
    top: -25%;
    z-index: 1;
}

.assignee-control:hover .assignee-details {
    display: block;
    border-radius: 8px;
    background: white;
    box-shadow: 0px 0px 10px 3px lightgray;
    width: max-content;
    min-width: 200px;
    position: absolute;
    top: -25%;
    z-index: 1;
}

.assignee-control .assignee-assign {
    color: black;
    display: inline-block;
    width: 0.7rem;
}

/*Styling for factref click through*/
.ref-click-thru-icon {
    color: darkgray;
    font-size: 1rem;
    margin-left: 10px;
}

.factref-clickthru-container {
    position: relative;
}

.factref-clickthru-container .factref-clickthru-btn {
    display: none;
}

.factref-clickthru-container:hover .factref-clickthru-btn {
    display: block;
    width: max-content;
    position: absolute;
    left: 90%;
    top: -25%;
}

/* Deal List Attributes & Filter dialog styling */
.vine-filter-attrib-form-group {
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: 0.375rem;
    background-clip: padding-box;
}

.vine-filter-attrib-group-label,
.vine-filter-where-group-label {
    font-size: 14px;
    padding-left: 0;
    padding-bottom: 0.25rem;
}

.vine-filter-attrib-legend {
    font-size: medium;
    font-weight: 600;
}

.vine-filter-attrib-chbx-group {
    display: grid;
    grid-template-columns: repeat(auto-fill, 13rem);
    padding-top: 0.75rem;
    padding-left: 1rem;
}

/* The container of attribute checkboxes */
.vine-filter-where-clause-group {
    display: block;
    /* stacks components vertically */
    padding-top: 0.75rem;
    padding-left: 1rem;
}

/* The container of where clause filter controls*/
.vine-filter-attrib-label {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    font-weight: 400;
}

.vine-filter-chkbx-label-container {
    display: flex;
    align-items: center;
}

/* .vine-filter-chkbx { } */
.vine-filter-label-container {
    display: flex;
    align-items: center;
}

.vine-filter-where-label {
    width: 15em;
    margin-left: 0.5rem !important;
    /* Bootstrap input CSS messes with this sometimes */
    margin-right: 0.25rem;
}

.vine-filter-operator-select {
    max-width: 3rem !important;
    /* Bootstrap messes with this too */
    padding: 0.25rem;
    margin-right: 0.25rem;
    border-radius: 0.375rem !important;
    /* bs */
}

.vine-filter-text-operator-select {
    max-width: 5.5em !important;
    /* Bootstrap messes with this too */
    padding: 0.25rem;
    margin-right: 0.25rem;
    border-radius: 0.375rem !important;
    /* bs */
}

.vine-filter-property-select {
    /* Bootstrap messes with this too */
    padding: 0.25rem;
    margin-right: 0.25rem;
    border-radius: 0.375rem !important;
    /* bs */
}

.vine-filter-text-input {
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: 0.375rem !important;
    /* bs */
    background-clip: padding-box;
    margin-right: 0.25rem;
    padding: 0.25rem;
    min-width: 22em;
}

.vine-filter-number-input {
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: 0.375rem !important;
    /* bs */
    background-clip: padding-box;
    margin-right: 0.25rem;
    padding: 0.25rem;
    width: 25em !important;
}

.vine-filter-AND-OR-radio-btns {
    max-height: 5rem;
    margin-left: 0.5rem !important;
    /* Bootstrap input CSS messes with this sometimes */
    margin-right: 0.25rem;
}

.vine-filter-no-radio-btns {
    min-width: 4.8em;
    min-height: 3.2em;
}

.vine-radio-btn:checked {
    background-color: var(--vineGreen);
    border-color: var(--vineGreen);
}

.vine-filter-attrib-advanced-icon,
.vine-filter-where-advanced-icon {
    content: url("../img/gearshape.svg");
    vertical-align: middle;
    scale: 75%;
    float: right;
    padding-bottom: 0.25rem;
    filter: var(--vineGreenFilter);
}

.vine-advanced-group-label {
    margin-left: 1rem;
    padding-top: 0.5rem;
}

.vine-filter-attrib-advanced-group,
.vine-filter-where-advanced-group {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;

    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: 0.375rem;
    background-clip: padding-box;
    padding: 0.25rem;
}

.vine-filter-attrib-advanced-label,
.vine-filter-where-advanced-label {
    width: 10rem;
    margin-left: 0.25rem !important;
    /* Bootstrap input CSS messes with this sometimes */
    margin-right: 0.25rem;
}

.vine-filter-attrib-advanced-path,
.vine-filter-where-advanced-path {
    width: 14rem;
    margin-left: 0.25rem;
    margin-right: 0.25rem;
}

.advanced-attribute-btn,
.advanced-where-btn {
    margin-left: 0.25rem;
    margin-top: 0.325rem;
    margin-bottom: 0.325rem;
}

/* Styling for Add Collaborator dialog */
#dealCollaboratorsListModal .form-group {
    padding-top: 1rem;
    /* put spacing above every section of labels with inputs */
}

/* Styling for Fact browser and others that use the same cascading menu model*/
/* See https://bootstrap-menu.com/detail-multilevel.html for reference */
/* ============ desktop view ============ */
.vine-fact-chooser-container {
    float: right;
}

.fact-chooser-inner-container {
    padding: 0;
}

.vine-fact-browser {
    margin: 0;
}

.vine-dropdown-menu {
    border: 2px solid darkgray;
}

.vine-dropdown-item:hover {
    background-color: var(--vinePaleGreen) !important;
}

.vine-dropdown-item-relative {
    position: relative;
}

@media all and (min-width: 992px) {
    .vine-dropdown-menu li {
        position: relative;
    }

    .nav-item .submenu {
        display: none;
        position: absolute;
        border: 2px solid darkgray;
        left: 25%;
        top: 75%;
    }

    .nav-item .submenu-left {
        right: 100%;
        left: auto;
    }

    .vine-dropdown-menu>li:hover {
        background-color: #f1f1f1 !important;
    }

    .vine-dropdown-menu>li:hover>.submenu {
        display: block;
    }
}

/* ============ desktop view .end// ============ */

/* ============ small devices ============ */
@media (max-width: 991px) {
    .vine-dropdown-menu .vine-dropdown-menu {
        margin-left: 0.7rem;
        margin-right: 0.7rem;
        margin-bottom: 0.5rem;
    }
}

/* End of Fact Browser styling */

/* Body tag */
.vine-body {
    overflow: hidden;
    /* Stops full screen scrolling so widgets can scroll themselves */
}

/* Styling for the viewlink UI component in list table view
    that contains a milestone summary */
/*
.vine-viewlink-wrapper {
  display: inline-block;
  width: 100%;
}
*/

.vine-milestone-span {
    padding-top: 5px;
    margin-right: 5px;
}

.milestone-span-viewlink {
    display: inline-block;
    width: 50%;
}

.view-link-pointer {
    display: inline-block;
    min-width: 77px;
    font-size: inherit;
    /* keep in sync with other chevrons and fonts */
}

/* vertically aligns chevron at end of row */
.view-link-pointer svg {
    vertical-align: middle;
    height: 70px;
    margin-top: auto;
    margin-bottom: auto;
}

/*Optional styling for the header of a card control*/
.vine-card-header {
    background-color: rgb(226, 237, 254);
}

/*Styling for the report name in the report list*/
.reportlist-name {
    font-weight: bold;
}

/*Styling for summary row in listByRow grouped fact list*/
.lbr-summary-row td {
    border-top: thin solid;
    /*background-color: rgb(234, 234, 234);*/
}

/*Styling for summary <td> in listByCol grouped fact list*/
.lbc-summary-col {
    border-left: thin solid;
}

/*table cell contents for list maker by row basic
add styling as required*/
/* .lmbrb-cell { } */

.lmbrb-cell-contents {
    min-height: 40px;
    display: inline-block;
    width: 100%;
}

/* dropzone file upload extended and custom styling for List Table widget*/
.vine-btn-tr {
    color: darkgray;
    padding-top: initial;
    padding-right: revert;
}

.vine-dz-spinner-medium {
    border-width: medium;
    margin: 12px;
    width: 30px;
    height: 30px;
    position: fixed;
}

.dropzone {
    min-height: auto !important;
}

.dz-preview-vine {
    background: transparent !important;
}

.vine-dz-image {
    position: fixed;
}

/* Used to show that views and/or facts are disabled 
   usually because of a missing dependency           */
.disabled {
    color: lightgrey;
}

#dropzone-doc-upload {
    height: 100%;
    border: 0;
}

.single-file-upload-remove-btn {
    margin-top: 16px;
}

/*note, This WILL cause problems when there are approx > 5 fields associated
with a doc upload, needs to be fixed*/
.widget-doc-upload {
    height: 780px;
    position: relative;
}

.widget-doc-upload-header {
    font-size: 2em;
    font-weight: 600;
}

.widget-doc-upload-docname {
    margin-bottom: 20px;
    display: block;
}

.widget-doc-upload-label {
    margin-top: 20px;
    margin-bottom: 10px;
    display: block;
}

.widget-doc-upload-section-heading {
    display: block;
    margin-top: 8px;
    font-weight: 600;
}

.widget-doc-upload-btns {
    float: right;
}

#dropzone-doc-upload {
    /*relative needed in order to align dz message*/
    position: relative;
    padding: 0;
}

/*'or drag here'*/
#dropzone-doc-upload p {
    margin-bottom: 0;
    margin-top: 16px;
}

/*centralize the dz 'upload ir grag' message for doc upload*/
#dropzone-doc-upload .dz-message {
    margin: 0;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
}

/*Centralize the doc icon that appears
in the doc upload following doc selection / drag */
#dropzone-doc-upload .dz-preview-vine {
    background: transparent;
    margin: 0;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
}

/*The icon that appears in the dz when a doc
is added / dragged*/
#dropzone-doc-upload .vine-dz-image-medium {
    width: 120px !important;
    height: 120px !important;
}

.vine-docupload-removebtn {
    margin-bottom: 8px;
}

/*inline dropzone - not upload modal*/
.vine-dropzone-inline {
    width: 400px;
    display: inline-block;
}

.vine-dropzone-inline .dz-preview {
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 0;
}

.vine-dropzone-inline .dropzone {
    padding: 0;
    height: 127px;
}

.vine-dropzone-inline .dz-message {
    margin-bottom: 0;
    margin-top: 47px;
}

.vine-dropzone-label {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 95 !important;
    padding: 16px !important;
    border-radius: 16px !important;
    background: hsla(0, 0%, 100%, 0.7) !important;

}

/*alert styling for field in edit mode*/
.vine-dz-image-medium-alert {
    animation-name: doc-upload-alert;
    animation-duration: 0.3s;
    animation-iteration-count: 2;
}

@keyframes doc-upload-alert {
    from {
        width: 130px;
        height: 130px;
    }

    50% {
        width: 140px;
        height: 140px;
    }

    to {
        width: 130px;
        height: 130px;
    }
}

.modal-body {
    max-height: 70vh;
    overflow: scroll;
}

#docUploadModalContent .container-fluid {
    padding: 0;
}

.dz-preview {
    min-height: auto !important;
    text-align: center;
}

.dz-error-mark {
    color: red !important;
}

.dz-success-mark {
    color: green !important;
}

/*Owl carousel styling for list table view*/
.vine-inline-thumbnail {
    width: 100px !important;
    height: 100px !important;
}

.vine-carousel-inline {
    position: absolute !important;
    display: inline-block !important;
    height: 100% !important;
    z-index: 90;
    overflow: auto;
}

.vine-carousel-img {
    display: block;
    width: 100%;
    height: auto;
}

.subscription-status p {
    margin-bottom: 0 !important;
}

.subscription-status-hdr {
    font-weight: 700;
}

.modal-vine-image-viewer {
    max-height: 1200px !important;
}

.modal-vine-content-image-viewer {
    max-height: 100vh !important;
}

/*Vine button OK*/
.btn-vine-ok {
    background-color: rgb(153, 204, 152);
    border-block-color: rgb(118, 121, 116);
    color: white;
}

.btn-vine-cancel {
    outline: none;
    background-color: none;
}

.btn-vine-cancel-hide {
    display: none;
}

/* override Bootstrap colors */

.btn-vine-primary {
    background-color: var(--vineGreen);
    outline: var(--vineGreen);
    color: white;
    width: auto;
}

/* override Bootstrap colors */
.btn-vine-primary:hover {
    color: var(--vineText);
    background-color: var(--vineGreenHover);
}

.btn-vine-primary:focus-visible {
    /* selected with a keyboard tab */
    background-color: var(--vineGreen);
    border-color: rgb(130, 148, 145), 0.5;
    /* border-color: var(--bs-btn-shadow-rgb);*/
    box-shadow: var(--bs-btn-focus-box-shadow);
    border-radius: 6px;
    color: white;
}

.btn-vine-primary-disabled {
    background-color: lightgray;
    outline: lightgray;
    color: white;
}

.btn-vine-circle-lg {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: var(--vineGreen);
    border: none;
    color: var(--vinePaleGreen);
    padding-top: 7px;
    text-align: center;
    display: inline-block;
    font-size: 1.8rem;
    cursor: pointer;
}

.btn-vine-circle-lg:hover {
    color: black;
}

.btn-vine-circle-sm {
    margin-bottom: 8px;
    margin-right: 8px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--vineGreen);
    border: none;
    color: var(--vinePaleGreen);
    text-align: center;
    display: inline-block;
    font-size: 1.5rem;
    cursor: pointer;
}

.btn-vine-circle-sm-inline {
    margin-bottom: 8px;
    margin-right: 8px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--vineGreen);
    border: none;
    color: var(--vinePaleGreen);
    text-align: center;
    display: inline-block;
    font-size: 1.5rem;
    cursor: pointer;
    float: right;
}

.btn-note-cancel {
    float: right;
}

.btn-group-fact-add {
    float: right;
}

.label-note {
    font-size: 1.3rem;
    font-weight: 500;
}

.header-note {
    margin-bottom: 8px;
}

.btn-vine-circle-sm:hover {
    color: black;
}

.add-collaborator-modal-body {
    min-height: 22em;
}

/* The Add new item button in the bottom right */
/* NOTE there is is a bug using right:20px that caused it to disappear sometimes.*/
/* bottom gets clipped any closer or using px */
.btn-vine-add-page-br {
    position: fixed;
    right: 20px;
    bottom: calc(6.5vh);
}

/* Alternate settings for the same circle plus icon that make it stay within 
   its parent container (like in Collaborators dialog) */
/* TODO Figure out how to apply this styling only in certain circumstances */
.btn-vine-add-page-br-dialog {
    position: absolute;
    right: 0.01rem;
    bottom: -1.75rem;
}

.unique-id-display {
    background-color: white;
    position: relative;
    z-index: 5000;
}

/*Json editor styling*/
.vine-jsonEditor {
    width: 100%;
    height: 1000px;
}

.vine-jsonEditor-noheight {
    width: 100%;
}

.json-editor-button {
    padding-left: 0.5em;
    padding-right: 0.5em;
}

.json-editor-button svg {
    margin-top: 0.5em;
}

.jsoneditor-vine-title {
    padding-right: 0.5em;
    padding-top: 0.5em;
    float: right;
}

/*overide Bootstrap list group item styling*/
.list-group-item-view {
    overflow: hidden;
    min-width: 200px;
    width: max-content;
    position: relative;
    display: block;
    padding: 3px 10px;
    margin-bottom: -1px;
    background-color: white;
    border: 1px solid #ddd;
    border-color: none;
    font-size: 0.875rem;
    border: 0;
    color: black;
}

.list-group-item-view-indent {
    padding-left: 1.5em;
}

.list-group-item-view-header {
    font-weight: 500;
    cursor: pointer;
    overflow: hidden;
    position: relative;
    display: block;
    padding: 3px 10px;
    margin-bottom: -1px;
    background-color: white;
    border: 1px solid #ddd;
    border-color: none;
    font-size: 0.875rem;
    border: 0;
    color: black;
}

.list-group-item-view:hover {
    background-color: #e8e8e8;
    color: black;
}

/*Styling for active item in <ul> in View*/
.list-group-item-view-active {
    background-color: lightgray;
    color: white;
}

/*Override styling for Bootstrap dropdown syling*/
.dropdownNoPadding {
    padding: 0;
}

/* Styling for global view edit, save, cancel UI controls */
.globalEditEdit {
    color: lightgray;
}

.globalEditSave {
    color: green;
}

.globalEditCancel {
    color: red;
}

/* the check (save) and cross (cancel) buttons
that appear after some fields in edit mode*/
.input-field-buttons {
    display: inline-block;
    margin-top: 12px;
}

/*Set min height of modal for adding homeview assignment to an organization
without min height being set the org name typeahead is obscured*/
#addEditHomeViewModal .modal-content {
    min-height: 400px;
}

/*Config editor styling*/

#definitionStringEditor {
    white-space: pre !important;
    overflow: auto !important;
    overflow-wrap: normal !important;
    overflow-x: scroll !important;
    word-wrap: normal;
}

/*End of config editor styling*/

/*Organization name search typeahead styling
see https://www.tutorialrepublic.com/codelab.php?topic=bootstrap&file=typeahead-with-local-dataset
for template this was based on
*/
/*
.bs-example {
	font-family: sans-serif;
	position: relative;
	margin: 100px;
}
*/
.typeahead,
.tt-query,
.tt-hint {
    line-height: 30px;
    outline: medium none;
    padding: 8px 12px;
    width: 396px;
}

.typeahead {
    background-color: #ffffff;
}

.typeahead:focus {
    border: 2px solid #0097cf;
}

.tt-query {
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
}

.tt-hint {
    color: #999999;
}

.tt-menu {
    background-color: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    margin-top: 12px;
    padding: 8px 0;
    width: 422px;
}

.tt-suggestion {
    padding: 3px 20px;
}

.tt-suggestion:hover {
    cursor: pointer;
    background-color: #0097cf;
    color: #ffffff;
}

.tt-suggestion p {
    margin: 0;
}

/*End of Typeahead styling*/

.vine-page {
    /* Needs deleting throughout. No longer needed with new UI */
    display: none;
}

/*Force input fields to be lowercase*/
/* See below */
.lowerCaseOnly {
    text-transform: lowercase;
}

/* Style placeholders generally to ignore styles like 
   the above, which also make the placeholders lower case */
::-webkit-input-placeholder {
    font-style: italic;
    text-transform: initial;
}

:-moz-placeholder {
    text-transform: initial;
}

::-moz-placeholder {
    text-transform: initial;
}

:-ms-input-placeholder {
    text-transform: initial;
}

/* may not be supported */

/*Remove padding/margin on tables containing controls
 that need to be vertically aligned with controls not
 in the table*/
.table-noLeftMargin td {
    padding-left: 0px;
}

.table-noLeftMargin th {
    padding-left: 0px;
}

/* START $vine library stuff */
/* Bootstrap breadcrumb separator & other styling for .vine-breadcrumbs */

/* Logo styling in the top nav */
/*
.logo {
    width:  45px !important;
    height: 45px !important;
    vertical-align: middle;
    margin-top: 5px;
    margin-left: 5px;
}
*/

/*Styling for the text content for Vine Message
Pane, example - alert messages*/
.vine-message-content {
    padding-left: 10px;
}

.vine-bool-checkbox {
    height: 1.25em;
    width: 1.25em;
}

/*Styling for the 'person' icon in the topnav*/
/*
.personIcon {
  font-size: 2.0rem;
  color: white;
}
*/

/*Sets the styling of the span containing the logo in the top nav*/
/*
 .vine-topnav-logo-span{
  max-width: 49px;
}
*/

/*Additionalstyling for the div containing company name/brand in top nav */
/*
.vine-navbar-brand{
  padding-left: 10px;
}
*/

/* Styling for the !Action Required Terms & Conditions link/button */
.vine-action-required {
    color: var(--vineGreen);
    font-weight: 500;
    text-decoration-line: underline;
}

/* Styling for the dropdown control used for editing/Viewing property values in Views */
.viewDropDownItem {
    font-size: 0.9rem;
}

/* Icon when the table row has the cursor over it*/
/* NOTE display: block; causes formatting issues in the menu item */
.viewPropertyIconDisplay {
    display: revert;
    float: right;
    vertical-align: -webkit-baseline-middle;
}

/* Delete icon variant - no float so it stays aligned with its column header */
.delPropertyIconDisplay {
    display: revert;
    vertical-align: -webkit-baseline-middle;
}

/* Icon when the table row does not have the cursor over it */
.viewPropertyIcon {
    display: none;
}

/* Delete icon variant - hidden by default */
.delPropertyIcon {
    display: none;
}

/* Icon that does not change style on row mouseover */
.viewPropertyIconPerm {
    display: block;
}

/*Following needed to hide the default caret for Bootstrap dropdown*/
#navbarSupportedContent .dropdown-toggle::after {
    border: 0 none;
}

/*----------------------------------------*/
/*Style overides for Bootstrap toggle custom switch*/

.custom-control-input:focus~.custom-control-label::before {
    /* when the button is toggled off  it is still in focus */
    border-color: red !important;
    /* box shadow is blue by default 
  but we do not want any shadow hence we have set  
  all the values as 0 */
    box-shadow: 0 0 0 0rem rgba(0, 0, 0, 0) !important;
    background-color: red !important;
}

/*The color of the toggler*/
.custom-control-label::after {
    background-color: white !important;
}

/*sets the background color of 
          switch when it is checked*/
.custom-control-input:checked~.custom-control-label::before {
    border-color: green !important;
    background-color: green !important;
}

/*Color when not checked*/
.custom-control-input:not(:checked)~.custom-control-label::before {
    border-color: red !important;
    background-color: red !important;
}

/*sets the background color when it is active*/
.custom-control-input:active~.custom-control-label::before {
    background-color: grey !important;
    border-color: grey !important;
}

/*sets the border color of switch when it is not checked but has focus*/
.custom-control-input:focus:not(:checked)~.custom-control-label::before {
    border-color: red !important;
    background-color: red !important;
}

/*-------------------------------------------*/

/*Specific class for making any html hover a pointer*/
.hand-pointer {
    cursor: pointer;
}

.ui-icon-loading {
    background-image: url(../img/ajax-loader.png);
    background-size: 46px 46px;
    width: 46px;
    height: 46px;
    transform: rotate(360deg);
    animation-name: spin;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    -webkit-transform: rotate(360deg);
    -webkit-animation-name: spin;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
}

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

    to {
        transform: rotate(360deg);
    }
}

@-webkit-keyframes spin {
    from {
        -webkit-transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(360deg);
    }
}

/*
 * Top navigation
 * Hide default border to remove 1px line.
 */
/* Old TopNav */
/*
.navbar-fixed-top {
  border: 0;
}
*/
/* Old TopNav */
/*
.nav-item:active {
    background-color: grey;
    color:       black;
}
*/

/*
 * Sidebar
 */

.sidebar {
    background-color: #f8f9fa;
    /* position: fixed was causing the layout overlap issues */
    /* Note that sidebar sticky has position relative */
    position: relative;
    top: -1.4em;
    /* nudge the top menu item up against the bottom of the topnav */
    left: 0;
    bottom: 0;
    z-index: 100;
    /* Behind the navbar, same plane as MainContentPane */
    padding: 0 0 0 0;
    box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.1);
}

/* Hide for mobile, show on wider screens */
/* Why is this commented out?
@media screen and (max-width: 768px) {
    .sidebar {
        display: none;
    }
}
*/

/* Let sidebar-sticky size to content; .vine-sidebar handles scrolling */
.vine-sidebar .sidebar-sticky {
    overflow-y: visible;
    height: auto;
}

.sidebar-sticky {
    position: relative;
    margin-top: 4px;
    height: calc(100vh);
    padding-top: 0.5rem;
    overflow-x: hidden;
    overflow-y: auto;
    /* Scrollable contents if viewport is shorter than content. */
}

@supports ((position: -webkit-sticky) or (position: sticky)) {
    .sidebar-sticky {
        position: -webkit-sticky;
        position: sticky;
    }
}

.sidebar .nav-link {
    font-weight: 500;
    color: #333;
}

.sidebar .nav-link .feather {
    margin-right: 4px;
    color: #999;
}

.sidebar .nav-link.active {
    color: #007bff;
}

.sidebar .nav-link:hover .feather,
.sidebar .nav-link.active .feather {
    color: inherit;
}

.sidebar-heading {
    font-size: 0.75rem;
    text-transform: uppercase;
}

/* blurs pages in background when modal opens */
body.modal-open .blur-on-modal {
    -webkit-filter: blur(2px);
    -moz-filter: blur(2px);
    -o-filter: blur(2px);
    -ms-filter: blur(2px);
    filter: blur(2px);
}

.form-control-dark {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.1);
}

.form-control-dark:focus {
    border-color: transparent;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25);
}

/* International-tel-input */
.iti__flag {
    background-image: url("../node_modules/intl-tel-input/build/img/flags.png");
}

@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
    .iti__flag {
        background-image: url("../node_modules/intl-tel-input/build/img/flags@2x.png");
    }
}

/* vap MessagePane widget */
.message-widget {
    position: fixed;
    top: 0px;
    left: 88px;
    width: calc(100% - 88px);
    z-index: 1000;
    transition: opacity 5s;
}

/* END $vap library stuff */

/* resize DatePicker */
.datepicker,
.table-condensed {
    font-size: small;
}

/* Move down content because we have a fixed navbar that is 50px tall */
/* Original settings with TopNav, replaced with May 2022 UI Redesign */
/*
body {
  padding-top: 67px; 
  font-size:   .875rem;
}
*/
.feather {
    width: 16px;
    height: 16px;
    vertical-align: text-bottom;
}

/*
 * Global add-ons
 */
.ui-page-theme-a {
    text-shadow: none;
    /* Override jQuery default */
}

.ui-overlay-a {
    text-shadow: none;
    /* Override jQuery default */
}

.sub-header {
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}

/* 
 * Icons
 */
.icon {
    width: 16px;
    height: 16px;
}

.icon-user-group-manage {
    margin-left: .5em;
    height: .8em;
    margin-bottom: .25em;
}

/*Styling for table columns,
Used in listByColBasic grouped fact list*/
.vine-table-col-01 {
    background-color: rgb(228, 228, 228);
}

/*
* List table navigation icon styling
*/
.list-table-nav-go {
    font-size: 1.75em;
    color: rgb(50, 143, 50);
}

.list-table-nav-stop {
    font-size: 1.75em;
    color: rgb(201, 52, 52);
}

.list-table-nav-span {
    padding-right: 0.3em;
}

/*end of list table nav icon styling */

.vine-group-fact-list-btn {
    font-size: inherit !important;
    padding: 0px !important;
    width: 100%;
}

/*Table styling option to avoid changing col widths
on dynamic content change and make things fit better
Used for the table containing group fact list*/
.vine-table-fixed {
    table-layout: fixed;
    margin-bottom: 0px;
}

/*
 * Login page
 */
/*
@media (min-width: 768px) {
    #loginContent {
       padding-left: 100px;
    }
}
*/
.vine-login-logo-img {
    width: 100%;
    max-width: 25rem;
    /* Ensure the logo doesn't get huge in screenwide contexts  */
    padding-left: 0.25px;
    /* shift it slightly left to make it look better aligned */
}

.loginTitle {
    text-align: center;
    padding-top: 0.5rem;
}

.login-inputs {
    max-width: max-content;
}

/*
* Error Message Styling
*/
.errorMessageClass {
    color: red;
    font-size: 120%;
}

/* 
 * User message requested by a redirect
 */
.redirectMessage {
    font-size: medium;
    font-weight: 100;
    padding-bottom: 1rem;
    width: 21rem;
    display: none;
    /* Hide by default, show when we put info in it */
}

/* Hide Developer Registration data collection fields initially */
.registerDetailsClass {
    display: none;
    /* height: calc(85vh);*/
    /* Done button was getting clipped */
    height: calc(90vh);
    overflow-y: auto;
}

/* The scrollable terms of service legal agreement pane that's scrollable */
.termsOfServicePane {
    height: calc(30vh);
    overflow-y: auto;
}

.center {
    text-align: center;
}

#financierListsDescriptionRow {
    margin-top: 20px;
}

/*
 * Main content
 */

.project-img {
    display: block;
    border-radius: 5%;
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
}

.project-name {
    text-align: center;
}

.project-location {
    text-align: center;
    display: block;
    margin-bottom: 20px;
}

.project-summary-header {
    text-align: left;
    margin-top: 6px;
    margin-bottom: 6px;
}

.project-summary {
    text-align: left;
    margin-bottom: 20px;
}

.status-message {
    font-weight: bold;
    font-size: 14px;
}

#addProjectImageRow {
    margin-top: 11px;
}

#newTemplateBtn {
    margin-top: 5px;
}

#templateBodyTextArea {
    height: 100px;
}

#suggestedFinanciersTblRow {
    margin-top: 30px;
}

#detail {
    margin-bottom: 10px;
}

/* Class to indicate an item was selected on a complex
   control holding messages particularly in list items.
   This is used for the Message Summaries selection  */
.selected-item-border {
    border-color: #007bff;
    border-width: thin;
    border-top-width: thin !important;
    /* overrides bootstrap LI setting */
    /*background-color: #007bff */
    /* lighter color over text? */
}

/* This is used for email templates and maybe other places
   where we want a solid color over the selected item */
.selected-item-solid {
    color: #fff;
    background-color: #007bff !important;
    /* override bootstrap stuff */
}

/* background of table for email templates */
tr.selectable-item:hover {
    background-color: rgb(248, 249, 250);
}

/* variable help alert pane */
.variable-help {
    position: fixed;
    top: 68px;
    left: 100px;
    width: 38%;
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    z-index: 1060;
}

/*****************************************************************/
/*May not be the best way to do this, investigate the new css framework */
/*Lists in Modals*/
.wrapper {
    display: grid;
    grid-template-columns: 10fr 1fr 1fr 1fr;
}

/*limit height of modal*/
/*Sets the maximum height of the entire modal to 95% of the screen height*/
/*
2022 08 29 JOS commented out as it was adding unnecessary  scroll bars in all instance
.modal-content {
  max-height: 80vh;
  overflow: scroll;
}
.modal-dialog{
  overflow-y: initial !important
}

.modal-body{
  max-height: 50vh;
  overflow-y: auto;
}
*/

/* From dealGuage.css*/
/* https://www.cssscript.com/creating-fast-and-responsive-gauges-with-pure-css/  */

/*The container for the whole thing*/
.container {
    /*width: 400px;*/
    height: 200px;
    position: absolute;
    /*top: 30%;*/
    /*left: 50%;*/
    overflow: hidden;
    text-align: center;
    /*transform: translate(-50%, -50%);*/
}

/*Backround to percentage bar*/
.gauge-a {
    z-index: 1;
    position: absolute;
    background-color: #dc3545;
    width: 400px;
    height: 200px;
    top: 0%;
    border-radius: 250px 250px 0px 0px;
}

/*The Centre circle*/
.gauge-b {
    z-index: 3;
    position: absolute;
    background-color: #ffffff;
    width: 325px;
    height: 165px;
    top: 35px;
    margin-left: 35px;
    margin-right: auto;
    border-radius: 250px 250px 0px 0px;
}

/*The percentage Bar*/
.gauge-c {
    z-index: 2;
    position: absolute;
    background-color: #31a746;
    width: 400px;
    height: 200px;
    top: 200px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 0px 0px 250px 250px;
    transform-origin: center top;
    transition: all 1.3s ease-in-out;
    /*transform:rotate(.25turn);*/
}

.gauge-data {
    z-index: 4;
    /*color: rgba(255,255,255,.2);*/
    color: rgb(14, 2, 2);
    font-size: 1.5em;
    line-height: 25px;
    position: absolute;
    width: 400px;
    height: 200px;
    top: 90px;
    margin-left: auto;
    margin-right: auto;
    /*transition: all 1s ease-out;*/
}

/* End dealGuage.css */

.vine-form-group {
    margin-top: 16px;
}

/*

formModal{
  float:left; 
  width:300px;
  }
  label{
  float:left;
  width:150px;
  margin-bottom:10px; 
  }
  input{
  float:left;
  width:150px;
  margin-bottom:10px; 
  }
*/

/*
 * From vine-sidebar.css
 * JOS
 Being used for test purposes while UI improvement is ongoing
 currently the sidebar and main content pane reference this
 so, once finalized the styling should be consolidated
 */

#wrapper {
    overflow-x: hidden;
}

.sidebar-wrapper {
    min-height: 100vh;
    margin-left: -55rem;
    -webkit-transition: margin 0.25s ease-out;
    -moz-transition: margin 0.25s ease-out;
    -o-transition: margin 0.25s ease-out;
    transition: margin 0.25s ease-out;
}

.sidebar-wrapper .sidebar-heading {
    padding: 0.875rem 1.25rem;
    font-size: 1.2rem;
}

.sidebar-wrapper .list-group {
    width: 20vw;
}

#QQpage-content-wrapper {
    min-width: 100vw;
}

#wrapper.toggled #sidebar-wrapper {
    margin-left: 0;
}

@media (min-width: 768px) {
    .sidebar-wrapper {
        margin-left: 0;
    }

    #page-content-wrapper {
        min-width: 0;
        width: 100%;
    }

    #wrapper.toggled #sidebar-wrapper {
        margin-left: -15rem;
    }
}

/*
 * New CSS for UI Redesign starting May 3, 2022
 */

/* Vine Green */
body.vine-cursor-wait, body.vine-cursor-wait * {
    cursor: wait !important;
}

:root {
    color-scheme: light; /* Prevent browser dark-mode UA styles from bleeding onto native form elements */
    --vineSansSerif: Gotham;
    --vineGreen: #35744b;
    /* Our standard dark green */
    --vineText: rgb(33, 37, 41);
    /* Greyish text color, easier to read */
    --vineLightGreyFilter: invert(92%) sepia(8%) saturate(23%) hue-rotate(2deg) brightness(97%) contrast(92%);
    /* #212529*/
    --vineGreenFilter: invert(33%) sepia(56%) saturate(468%) hue-rotate(94deg) brightness(89%) contrast(90%);
    --vineGreenHover: #59a875;
    /* A companion to vineGreen for use with button hovers or similar limited use */
    --vinePaleGreen: #c8ffc7;
    /* For light text and icons, not backgrounds */
    --vinePaleGreenFilter: invert(88%) sepia(26%) saturate(386%) hue-rotate(63deg) brightness(105%) contrast(101%);
    /* 
    NOTE the filter settings above are the SVG filters that are the equivalent of the color hex values
     over an orginal black image. The SVG files should have their stroke and fill set to "currentColor"
     https://stackoverflow.com/questions/22252472/how-can-i-change-the-color-of-an-svg-element
     Refer to this to convert hex color to CSS filter statement: https://codepen.io/sosuke/pen/Pjoqqp
   */
}

/* What is this? It's probably causing errors */
/* #d92#d92f30f30 */

/*  Global settings on the body tag */
body {
    font-family: "Gotham";
    font-size: 0.875rem;
}

/* Experimental tooltip usage, currently in Spreader
Will probably replace the 'vine-tooltip' stuff below
Used BS 5.3.0
*/
.tooltip-inner {
    background-color: var(--vineGreen);
    color: #fff;
}

/* Reusable tooltip 
 * (embed <div class="vine-tooltip">Tooltip text</div> in HTML */
/* NOTE this is not displaying right. It's getting clipped by the MCP */
.vine-tooltip {
    display: none;
    width: 120px;
    background-color: #555;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;

    /* Position the tooltip text */
    position: absolute;
    left: 75%;
    top: 50px;

    /* Fade in tooltip */
    opacity: 0;
    transition: opacity 0.3s;
}

/* Adjustments to the tooltip when the hover event happens */
.vine-tooltip:hover {
    display: block;
    position: relative;
    /*
  top: -24px;
  left: 33px;
  */
    top: -70px;
    left: 70px;

    opacity: 1;
}

/* Create a speech bubble-like point to the left of the tooltip box */
.vine-tooltip::before {
    content: "";
    position: relative;
    top: -24px;
    left: 33px;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    /* Points left < */
    border-color: transparent #555 transparent transparent;
    /* Points down v */
    /*border-color: #555 transparent transparent transparent;*/
}

/* Offset main content so it sits beside the collapsed fixed sidebar */
#altCommonDashboard {
    padding-left: 88px;
}

/* Sidebar */
.vine-sidebar {
    position: fixed;
    width: 300px;
    min-width: 88px;
    max-width: 88px;
    height: calc(100vh);
    left: 0px;
    top: 0px;
    background: var(--vineGreen);
    z-index: 1050;
    transition: max-width 0.5s ease;
    overflow-x: hidden;
    overflow-y: auto;

    /* Inside auto layout */
    flex: none;
    order: 0;
    flex-grow: 0;
    margin: 0px 0px;
}

/* Expand the sidebar to fit the widest label */
@media (min-width: 768px) {
    .vine-sidebar.vine-sidebar-expanded {
        max-width: 300px;
    }
}

@media (min-width: 768px) {
    .vine-sidebar.vine-sidebar-expanded .vine-sidebar-item {
        /* Keep the same left margin so icons don't shift */
        text-align: left;
    }
}

.vine-sidebar.vine-sidebar-expanded .vine-sidebar-item img {
    flex-shrink: 0;
}

.vine-sidebar-item img {
    filter: var(--vinePaleGreenFilter);
}

@media (min-width: 768px) {
    .vine-sidebar.vine-sidebar-expanded .vine-sidebar-item span {
        width: auto;
        overflow: visible;
        margin-left: 0.5rem;
        font-weight: 800;
        color: var(--vinePaleGreen);
        white-space: nowrap;
        opacity: 1;
        transition: font-size 0.15s ease;
    }

    .vine-sidebar.vine-sidebar-expanded .vine-sidebar-item:hover span {
        font-size: 16px;
    }
}

/* Highlight behind sidebar icons when selected */
/* Note that the SideNav code actively looks for vine-sidebar and vine-selected */
.vine-sidebar .vine-selected {
    background: none;
}

/* Show a subtle circle behind just the icon when selected */
.vine-sidebar .vine-selected img {
    background: rgba(22, 24, 23, 0.32);
    border-radius: 50%;
    box-shadow: 0 0 0 6px rgba(22, 24, 23, 0.32);
}

/* Selected item when SideBar is expanded */
@media (min-width: 768px) {
    .vine-sidebar.vine-sidebar-expanded .vine-selected {
        background: rgba(22, 24, 23, 0.32);
        border-radius: 0.75rem;
    }

    .vine-sidebar.vine-sidebar-expanded .vine-selected img {
        background: none;
        box-shadow: none;
    }
}

/* Minimize the visibility of the selecting circle on click 
   when the sidebar is expanded while still causing the icon to move a bit */
.vine-sidebar.vine-sidebar-expanded .vine-sidebar-item a:active {
    border-radius: 50%;
    border: 1px solid rgba(22, 24, 23, 0.32);
}

/* Active on a link only appears while it's being activated */
/* Widget code also adds and removes active class */
.vine-sidebar-item a:active {
    border-radius: 50%;
    border: 3px solid rgba(22, 24, 23, 0.32);
}

/* Sidebar nav item */
.vine-sidebar-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 40px;
    width: auto;
    /* 24px left margin centers the 40px icon box in the 88px collapsed sidebar */
    margin: 16px 0 16px 24px;
    padding: 9px 8px 8px 8px;
    /* Icons are Fonts */
    font-family: "Gotham";
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 19px;
    /* identical to box height */
    text-align: center;
    color: var(--vinePaleGreen);
    /* Inside auto layout */
    flex: none;
    order: 0;
    flex-grow: 0;
}

/* Ensure the anchor inside each sidebar item also uses flex for stable alignment */
.vine-sidebar-item a {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 100%;
    text-decoration: none;
}

/* Hide labels in collapsed state but keep them in flow to prevent layout shifts */
.vine-sidebar-item a span,
.vine-sidebar-item a span:active {
    display: inline-block;
    width: 0;
    overflow: hidden;
    opacity: 0;
    white-space: nowrap;
    font-family: var(--vineSansSerif);
    font-style: normal;
    text-decoration: none;
    font-weight: bold;
    font-size: 14px;
    line-height: 21px;
    transition: opacity 0.2s ease 0.15s;
}

/* SideNav footer currently displaying the logged in user's name */
.vine-sidebar-footer {
    margin-top: 0.5rem;
    margin-left: 5px;
    margin-right: 5px;
    text-align: center;
    color: var(--vinePaleGreen);
    word-break: break-word;
}

/* No special footer override needed on hover — content never reflows */

.vine-sidenav-username {
    font-family: var(--vineSansSerif);
    font-style: normal;
    text-decoration: none;
    font-weight: bold;
    font-size: 10px;
}

/* ── Mobile sidebar: hamburger toggle + off-canvas overlay ────────────── */
/* These rules ONLY apply below 768px (phones). Tablets and desktop are unaffected. */

/* Hamburger button — hidden on desktop, visible on mobile */
.vine-mobile-menu-btn {
    display: none; /* desktop default — overridden below */
}

/* Semi-transparent overlay behind the sidebar when open */
.vine-mobile-overlay {
    display: none; /* desktop default — overridden below */
}

@media (max-width: 767.98px) {
    /* Hamburger button */
    .vine-mobile-menu-btn {
        display: block;
        position: fixed;
        top: 10px;
        left: 10px;
        z-index: 1060; /* above sidebar (1050) */
        background: var(--vineGreen);
        color: var(--vinePaleGreen);
        border: none;
        border-radius: 6px;
        width: 40px;
        height: 40px;
        font-size: 20px;
        line-height: 40px;
        text-align: center;
        padding: 0;
        cursor: pointer;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    }

    .vine-mobile-menu-btn:active {
        background: var(--vineGreenHover);
    }

    /* Hide the sidebar off-screen by default on mobile */
    .vine-sidebar {
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        max-width: 260px !important;
        min-width: 260px !important;
    }

    /* Slide the sidebar in when the open class is applied */
    .vine-sidebar.vine-sidebar-mobile-open {
        transform: translateX(0);
    }

    /* Remove the main content left padding so it uses full screen width */
    #altCommonDashboard {
        padding-left: 0 !important;
    }

    /* Overlay behind sidebar when open */
    .vine-mobile-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.4);
        z-index: 1040; /* below sidebar (1050), above content */
    }

    .vine-mobile-overlay.vine-mobile-overlay-visible {
        display: block;
    }

    /* When sidebar is open on mobile, always show labels (expanded style) */
    .vine-sidebar.vine-sidebar-mobile-open .vine-sidebar-item span {
        width: auto;
        overflow: visible;
        margin-left: 0.5rem;
        font-weight: 800;
        color: var(--vinePaleGreen);
        white-space: nowrap;
        opacity: 1;
    }

    /* Expand the selected item highlight when sidebar is open on mobile */
    .vine-sidebar.vine-sidebar-mobile-open .vine-selected {
        background: rgba(22, 24, 23, 0.32);
        border-radius: 0.75rem;
    }

    .vine-sidebar.vine-sidebar-mobile-open .vine-selected img {
        background: none;
        box-shadow: none;
    }
}

/* ── End mobile sidebar ─────────────────────────────────────────────── */

/* ── Mobile Needs List tooltip ──────────────────────────────────────── */
.vine-mobile-needs-tip {
    position: absolute;
    z-index: 1100;
    background: var(--vineGreen);
    color: #fff;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 13px;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0,0,0,.25);
    pointer-events: auto;
    cursor: pointer;
}

/*
 * Main Content Pane
 */
[role="main"] {
    z-index: 100;
}

@media (min-width: 768px) {
    [role="main"] {
        padding-top: 0px;
    }

    .main {
        padding: 0px;
    }
}

/*referenced in list table config for vineAdmin and orgAdmin*/
.admin-list-table {
    min-width: 25rem;
    margin-bottom: 4rem;
}

/*referenced in main content pane config for vineAdmin*/
.admin-main-content-pane {
    overflow: hidden;
    width: 100%;
}

.main-content-pane-default {
    width: 100%;
    height: calc(100vh) !important;
}

.vine-main-content-pane {
    margin-top: 30px;
    margin-left: 30px;
    margin-right: 20px;
    margin-bottom: 10px;

    /* The entire MainContentPane scrolls, however by default ListTables */
    /* scroll their table contents if the view height is big enough */
    /* Refer to .vine-list-table-content-top CSS settings */
    /* Adjust the height to ensure there's room for the Paginator */
    overflow-y: auto;
    height: calc(90vh);

    /* Using Flex for MainContentPane lets us control the layout with CSS */
    display: flex;
    flex-direction: column;
    /* Order top-to-bottom rather than left-to-right */
}

/* This is applied on MainContentPane for Login rather than vine-main-content-pane*/
.login-main-content-pane {
    position: sticky;
}

/* This is applied on MainContentPane for Login rather than vine-main-content-pane*/
.login-main-content-pane {
    position: sticky;
    left: 20vw;
}

/* Padding that appears on login, but is hidden during registration */
.loginFormPadding {
    margin-top: 20vh;
}

/* 
 * Deal Views
 *
 * Special classes added to widgets
 * to let map go edge to edge  
 * and have larger margins for some content 
 * NOTE viewShowPane was the old title, left temporarily for compatibility
 */
.vine-MainContentPane-dealShowPane,
.vine-orgView-main-content-pane,
.vine-contactView-main-content-pane,
.vine-MainContentPane-viewShowPane {
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    width: 100vw;
}

/* .vine-dealview-viewWidget { } */

/* Deal & Org HomeView ListTable Title Header styling */
.vine-deal-home-deal-title,
.vine-org-home-org-title {
    font-family: 'Gotham';
    font-style: normal;
    font-weight: 700;
    font-size: 48px;
}

.vine-deal-home-deal-description,
.vine-org-home-org-description {
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
}

.vine-deal-status,
.vine-org-home-org-status {
    font-style: normal;
    font-weight: 590;
    font-size: 12px;
    text-transform: uppercase;
}

/*Deal list styling common to all roles used in DB config style*/
/*This should be added after vine-main-content-pane so both are used*/
/* Currently other list MCPs have the same styling, but they likely will diverge */
/* TODO We should consider using media queries to adjust this for small screens */
.vine-dealList-main-content-pane,
.vine-dataRoomList-main-content-pane,
.vine-orgList-main-content-pane,
.vine-contactList-main-content-pane,
.vine-modelList-main-content-pane,
.vine-messageTemplateTypeList-main-content-pane,
.vine-messageTemplateList-main-content-pane,
.vine-preferences-main-content-pane,
.vine-reports-main-content-pane,
.vine-messages-main-content-pane {
    width: 100%;
    margin-left: 4%;
    padding-right: calc(10vw);
    /* leave room for the green add button circle in the padding area */
}

/* Styling for each ListTable row */
.vine-deal-list-table-row,
.vine-deal-home-searchResults-list-table-row,
.vine-dataRoom-list-table-row,
.vine-org-list-table-row,
.vine-contact-list-table-row,
.vine-model-list-table-row,
.vine-messageTemplateType-list-table-row,
.vine-messageTemplate-list-table-row .vine-preferences-list-table-row {
    border-top: 1px solid lightgray;
    height: 55px;
}

/* The preferences are more of a UI than a list of items. Don't use lines */
.vine-preferences-list-table-row {
    height: 55px;
}

/* ========================================
   Org Admin Preferences Management UI
   ======================================== */
.org-admin-prefs-container {
    padding: 16px;
    max-width: 900px;
}

.org-admin-prefs-card {
    margin-bottom: 8px;
    border: 1px solid #dee2e6;
    border-radius: 4px;
}

.org-admin-prefs-card-header {
    background-color: #f8f9fa;
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 10px 16px;
    font-weight: 600;
    font-size: 15px;
    color: #333;
    user-select: none;
    border-bottom: 1px solid #dee2e6;
}

.org-admin-prefs-card-header:hover {
    background-color: #e9ecef;
}

.org-admin-prefs-section-icon {
    margin-right: 10px;
    color: #6c757d;
    width: 20px;
    text-align: center;
}

.org-admin-prefs-chevron {
    margin-left: auto;
    transition: transform 0.2s ease;
    color: #6c757d;
    font-size: 12px;
}

.org-admin-prefs-card-header.collapsed .org-admin-prefs-chevron {
    transform: rotate(-90deg);
}

.org-admin-prefs-card-body {
    padding: 16px 24px;
}

.org-admin-prefs-card-body .form-group {
    margin-bottom: 12px;
    align-items: center;
}

.org-admin-prefs-card-body .col-form-label {
    font-size: 14px;
    color: #495057;
}

.org-admin-prefs-card-body .form-control {
    font-size: 14px;
}

.org-admin-prefs-sub-setting {
    padding-left: 24px;
}

.org-admin-prefs-sub-setting .col-form-label {
    font-size: 13px;
    color: #6c757d;
}

.org-admin-prefs-save-status {
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 10px 20px;
    border-radius: 4px;
    font-size: 14px;
    z-index: 1060;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    transition: opacity 0.3s ease;
}

.org-admin-prefs-save-status.save-success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.org-admin-prefs-save-status.save-error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.org-admin-prefs-save-status.save-saving {
    background-color: #cce5ff;
    color: #004085;
    border: 1px solid #b8daff;
}
/* End Org Admin Preferences Management UI */

/* NOTE 
 * title-wrapper is used with titleHtml
 * and table-title is used with titleMsgKey.
 */
@media (min-width: 768px) {

    .vine-deal-home-deal-title-wrapper,
    .vine-org-home-org-title-wrapper {
        /* padding: 0 100px 32px 120px;*/
        padding: 0 8rem 3.25rem 8.5rem;
    }
}

@media (max-width: 768px) {

    .vine-deal-home-deal-title-wrapper,
    .vine-org-home-org-title-wrapper {
        padding: 0 8px 24px 8px;
    }
}

/* This doesn't seem to be in the HTML? */
@media (min-width: 768px) {

    .vine-deal-home-list-table-title,
    .vine-org-home-list-table-title {
        /* top,right,bottom,left */
        padding: 0 100px 0 120px;
    }
}

@media (max-width: 767px) {

    .vine-deal-home-list-table-title,
    .vine-org-home-list-table-title {
        padding: 0 8px 0 8px;
    }
}

/* NOTE The padding should match for the ListTable elements */

/* Deal HomeView ListTable Table styling 
 * NOTE 
 * The name is confusing, this is the part
 * of the Widget that wraps the actual HTML 
 * table element, as opposed to other elements
 * like the Title Header HTML. There's also 
 * a body wrapper that represents the table
 * body element, as opposed to the table 
 * header row that labels the columns.
 */
@media (min-width: 768px) {

    .vine-deal-home-list-table-table-wrapper,
    .vine-org-view-list-table-table-wrapper,
    .vine-multi-col-basic-wrapper {
        margin-left: 137px;
        margin-right: 100px;
    }

    /* Skip the deep indent for inline widget ListTables. Find a cleaner solution */
    .inline-widget-container-table .vine-deal-home-list-table-table-wrapper,
    .inline-widget-container-table .vine-org-view-list-table-table-wrapper {
        margin-left: 0px;
        margin-right: 0px;
    }

    .vine-deal-list-list-table-table-wrapper,
    /* deal list not deal home view */
    .vine-org-home-list-table-table-wrapper {
        margin-left: 0px;
        margin-right: 0px;
    }

    /* Table header left margin should match the list-table-table-wrapper      */
    /* The equivalent class deal-list-list-table-sub-heading doesn't need      */
    /* this because the margin is set on containing elements in that situation */
    .vine-deal-home-list-table-sub-heading {
        margin-left: 137px;
    }

    .vine-deal-list-list-table-sub-heading {
        margin-left: 0px;
    }

    /* The Excel-like SpreadingWidget top-level element */
    /* Note that we're trying to have the same left margin as elsewhere */
    /* which is 137px. The spreadsheet is wrapped in an container-fluid */
    /* used throughout that has 0.75rem padding on the left so this is adjusted */
    .vine-spreading-view-widget {
        margin-left: 127px;
        margin-right: 100px;
        order: 3;
    }
}

@media (max-width: 767px) {

    .vine-deal-home-list-table-table-wrapper,
    .vine-org-view-list-table-table-wrapper,
    .vine-multi-col-basic-wrapper {
        margin-left: 6px;
        margin-right: 6px;
    }

    .vine-deal-list-list-table-table-wrapper,
    /* deal list not deal home view */
    .vine-org-home-list-table-table-wrapper {
        margin-left: 0px;
        margin-right: 0px;
    }

    .vine-deal-home-list-table-sub-heading {
        margin-left: 6px;
    }

    .vine-deal-list-list-table-sub-heading {
        margin-left: 0px;
    }

    .vine-spreading-view-widget {
        margin-left: 6px;
        margin-right: 6px;
        order: 3;
    }
}

.deal-list-col2 {
    padding-right: 4px;

    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.deal-list-milestone-wrapper {
    display: inline-block;
    margin-right: 8px;
    order: 1;
}

.deal-list-action-menu {
    display: flex;
    flex-direction: column;
    justify-content: center;
    order: 2;
}

.deal-list-top-nav-action {
    padding-right: 0 !important;
}

/* 
 * Map image stretching edge-to-edge 
 * We set a background image using the 
 * style attribute (now on the span) like:
 * background: url(" + url + ") no-repeat center center fixed; 
 * This is now done on the span below for accessibilty reasons.
 */
.vine-dealview-map-pane {
    width: 100%;
    min-height: 200px;
    /* min-height overrides height settings & calculations */
    margin-left: 0px;
    margin-top: -20px;
    /*
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
   */
}

/* ARIA needs the image to be in a SPAN, not a DIV. Give it the same size as the pane */
/* Dunno why !important is required for background repeat and position but it is      */
.vine-dealview-map-span {
    width: 100%;
    min-height: 100%;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

.vine-modal-body {
    padding-top: 0;
}

.vine-ordered-list thead td {
    font-weight: 600;
    padding-right: 24px;
    border-bottom: 1px solid lightgray;
}

.vine-ordered-list tbody td {
    max-width: 300px;
    word-wrap: break-word;
    padding-right: 24px;
    cursor: pointer;
}

.ordered-list-sort {
    display: block;
    float: right;
}

.vine-modal-content {
    background: #ffffff;
    box-shadow: 0px 8px 48px #ffffff;
}

.vine-modal-header {
    border-bottom: 0;
}

.vine-modal-footer {
    border-top: 0;
}

#docUploadSaveMessage {
    position: absolute;
    left: 50%;
    top: 80%;
    transform: translateX(-50%);
    z-index: 20;
    background: #ffffff;
    box-shadow: 0px 8px 48px #ffffff;
    border-radius: 16px;
    opacity: 0.8;
    padding: 8px;
}

.doc-upload-viewer {
    position: relative;
    padding: 0;
}

.doc-upload-viewer .dropzone {
    position: absolute;
    background-color: rgba(255, 255, 255, 0.5);
    z-index: 20;
}

.doc-upload-viewer .dz-message {
    background-color: white !important;
    border-radius: 16px;
    padding: 8px;
    box-shadow: 0 0 8px 16px white;
    opacity: 0.8;
}

.doc-upload-viewer .dz-preview {
    background-color: white !important;
    border-radius: 16px;
    padding: 8px;
    box-shadow: 0 0 8px 16px white;
    opacity: 0.8;
}

.doc-upload-canvas {
    position: absolute;
    width: 100% !important;
    z-index: 10;
    height: 100% !important;
}

/* 
 * Styles for the Simple Two Column inline widget 
 */

/*Default View row styling option*/
.vine-simpleTwoCol-row {
    /* height: 44px !important;*/
    height: 2.75rem;
    margin-top: 0px;
    margin-bottom: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
}

.vine-simpleTwoCol-01-span {
    display: inline-block;
    vertical-align: middle;
    height: 3.75rem;
    padding: 0;
    border: 0;
    margin: 0;
}

.vine-simpleTwoCol-02-span {
    padding-left: 3px;
    display: inline-block;
    vertical-align: middle;
}

/*This style dynamically replaces vine-simpleTwoCol-02-span in the edit modal*/
.vine-simpleTwoCol-02-edit-span {
    display: inline-block;
    vertical-align: middle;
    width: 100%;
    /* Use 100% of the space our parent (e.g. <TD>) gives us */
    max-width: 25rem;
    /* about 400px */
    /* width: 400px; */
    /* We can't set a fixed width because of usage in different situations */
}

/* This is added to the value (right) cell and allows overriding values in vine-display-value-span-wrapper */
.vine-input-field-span-default {
    width: 100%;
}

/* This corresponds to the style above. So we can keep them looking in sync as the mode changes */
.vine-input-field-span-edit {
    width: 100%;
}

/* Override layout of table columns in modal edit dialog, like in Needs List */
/* NOTE We need to adjust the TD but the generated span has the most specific label 
   this is an approximation. We probably need a more robust HTML & CSS solution 
   that's more specific to particular UI use cases and less generic (and more usable) */
.vine-modal-content .vine-edit-label {
    width: 30%;
    max-width: 10rem;
}

.vine-modal-content .vine-edit-value {
    width: 100%;
    padding-right: 6px;
}

/* Static Maps built by generatePresentationValueFromRawData() */
.vine-static-map {
    border-radius: 12px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 8px;
    display: block;
}

/* 
 * Top Nav
 * NOTE Reports currently uses some of these styles too
 * but the effects aren't good. This needs fixing.
 * I think it was a name collision issue.
 * David Mar 21, 2023. Yes it is a styling conflict. 
 * In reports the width and border is getting overriden 
 * and border-radius is for other locations but looks bad in Reports
 * Adding reports-tab and putting after these others to handle this.
 */

.nav-item {
    width: 56px;
    padding: 0.5rem 1rem;
    border: 0px rgba(0, 0, 0, 0);
    border-radius: 16px;
}

.nav-item:active {
    color: var(--vinePaleGreen);
    background-color: rgba(22, 24, 23, 0.32);
    border-radius: 16px;
}

/* Overrides styling for the Reports tabs where they conflict with other areas */
.reports-tab {
    width: unset;
    /* override the specific width setting in nav-item */
    padding: 0.5rem 1rem;
    border: 1px var(--vineText);
    border-radius: unset;
}

/* Override nav-item width for Messages tabs (same pattern as .reports-tab) */
.messages-tab {
    width: unset;
    border-radius: unset;
}

/* Override nav-item width for Import/Export tabs */
.import-export-tab {
    width: unset;
    border-radius: unset;
}

/* Remove link colors and other colors from all nav-items 
 * regardless of screen size (and override Bootstrap) */
.vine-collapsible-navitem-container>nav-item,
.vine-collapsible-navitem-container>a,
.vine-collapsible-navitem-container>list-group-item:active {
    background-color: none;
    border: 0px rgba(0, 0, 0, 0) !important;
}

@media all and (min-width: 768px) {
    .navbar-vine {
        /*padding-left: 80px;*/
        /* Trying to get things to align with other components better */
        /*padding-left: 8.0rem;*/
        padding-right: 80px;
        padding-bottom: 20px;
    }

    .navbar-deal-list,
    .navbar-org-list {
        padding-left: 0;
        padding-right: 0;
        padding-bottom: 20px;
    }

    .navbar-datarooms {
        margin-left: -0.60rem;
        padding-left: 0;
        padding-right: 0;
        padding-bottom: 20px;
    }

    .navbar-org-view {
        /*padding-left: 4.75rem;*/
        /* Trying to get things to line up better and more consistenly */
        padding-left: 8.0rem;
        padding-right: 7.25rem;
        padding-bottom: 20px;
    }

    /* padding: 0 8.0rem 3.25rem 8.5rem; */

    .vine-collapsible-navitem-container {
        float: right;
        /*margin-right: 40px;*/
        margin-right: 3rem;
    }
}

@media (max-width: 767px) {
    .navbar-vine {
        padding-left: 0;
        padding-right: 0;
        padding-bottom: 0;
    }

    .navbar-deal-list,
    .navbar-org-list {
        padding-left: 6px;
        padding-right: 6px;
        padding-bottom: 0px;
    }

    .navbar-org-view {
        padding-left: 0;
        padding-right: 0;
        padding-bottom: 0;
    }

    .vine-collapsible-navitem-container {
        float: right;
        margin-right: 6px;
    }
}

/* These are are icons on the top right with search, print, more        */
/* This has negative margin so the right icon lines up in most cases    */
/* with the right margin of everything else, including the grid lines   */
/* but it needs to actually hang off the right for highlighting with    */
/* mouse-over, long-press, etc.                                         */
/* The negative margin is related to the fixed width of the nav-items.  */
.org-list-navitems,
.deal-list-navitems {
    margin-right: -32px;
}

.orgView-navitems {
    margin-right: -6px;
}

.navbar-back {
    /* Optionally, you can set the URL w/CSS 
   * rather than specifying it in the config 
   * as an IMG using the brand/logo settings */
    /*content: url('../img/arrow-back.svg');*/
    vertical-align: middle;
    width: 32px;
    height: 32px;
}

/* .vine-topnav-logo-span { display: none; } */
.vine-topnav-title {
    display: none;
}

/* Bootstrap navbar-toggler-item provides additional styling */
/* Commented out because the url image was overlaying an existing image */
/* .navbar-toggler-icon { content: url("../img/more.svg"); } */

/* .navbar-main { }   */
/* .navbar-footer { } */
.navbar-vine .form-control {
    padding: 0.75rem 1rem;
    border-width: 0;
    border-radius: 0;
}

.navbar-deal-list .form-control,
.navbar-org-list .form-control {
    padding: 0.75rem 1rem;
    border-width: 0;
    border-radius: 0;
}

.vine-topnav-dropdown-menu {
    position: relative;
    padding-top: 1.0rem;
    padding-bottom: 0.50rem;
    margin-right: 0.5rem;
    float: right;
    /*left: 25%; width: 36px;*/
}

.vine-topnav-dropdown-menu>nav-item {
    width: 56px;
}

@media (max-width: 767) {
    .vine-topnav-dropdown-menu {
        display: block;
    }
}

@media (min-width: 768) {
    .vine-topnav-dropdown-menu {
        display: none;
    }
}

/* Deal Home View BreadCrumbs */
.vine-dealHomeViewBreadCrumbs-span {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

/* BreadCrumbs (updated for 2022 redesign) 
 * NOTE The name was changed to differentiate from Bootstrap breadcrumb 
 */
.vine-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    /*padding: 0 0 0 14px;*/
    padding: 0 0 0 0;
    /* Trying to get left to align cleanly with other items without arrow */
    margin-top: 1rem;
    margin-bottom: 1rem;
    background-color: transparent;
    color: rgba(33, 37, 41);
}

.vine-breadcrumb-item {
    margin-top: 5px;
    margin-bottom: 5px;
    color: var(--vineGreen);
    letter-spacing: 0.05em;
    word-spacing: 0.2em;
    text-transform: uppercase;
}

.vine-breadcrumb-item:not(:last-child)::after {
    padding: 0 0.75rem;
    content: ">";
}

.vine-breadcrumb-item.active {
    color: var(--vineGreen);
}

/*
 * View ListTable CSS
 */

/* NOTE 
   February 8, 2022 Putting in placeholder classes for ListTable configuration
   locations as a potential standard. Having placeholders, even if they're empty, 
   helps make it clearer what configuration entries match the CSS arrays in the 
   code. Note that the config also has style entries in some places and those 
   of course can't go in here, which is why array indexes may not be sequential here. */
/* June 2, 2022 - Note that empty classes cause errors. Comment them out when unused */

/* Config placeholder and identifier css[0] */
.vine-list-table-top {
    width: 100%;
    order: 3;
    /* For flex layout, ignored for block. Override with bs class order-n */
}

/* Config placeholder and identifier css[2] */
.vine-list-table-title {
    margin-bottom: 32px;
}

/* Config placeholder and identifier css[9] Yes, it's out of order. */
.vine-list-table-sub-heading {
    margin-bottom: 0;
}

.vine-org-view-list-table-sub-heading {
    margin-left: 137px;
    font-size: xx-large;
    margin-bottom: 0;
}

/* Config placeholder and identifier css[3] */
@media all and (min-height: 40rem) {

    /* Make the Deals inside the ListTable scrollable using 60% of the view height */
    /* This also helps ensure there's room for the Paginator and search and title stay visible */
    /* NOTE This causes problems with Inline Views. Ensure no-scroll below is used for them. */
    /* The error caused the chevron to not appear and items were not clickable */
    /* Ensure any styles used within Inline Views use no-scroll */
    .vine-list-table-content-top {
        overflow-y: auto;
        height: calc(60vh);
        margin-bottom: 100px;
    }

    /* Used by the dealHomeView style to override the table scrolling above 
     because the whole page scrolls. NOTE This must be after the above class to override it */
    .vine-list-table-content-top-no-scroll {
        overflow-y: revert;
        height: 100%;
    }
}

@media (min-width: 768px) {
    .vine-list-table-table-wrapper {
        padding-top: 5px;
        border: none;
    }
}

@media (max-width: 767px) {
    .vine-list-table-table-wrapper {
        padding-top: 5px;
        border: none;
    }
}

/* Config placeholder and identifier css[5] */
.vine-list-table-table-class {
    background-color: white;
}

/*To help enable alignment
of content in list tables*/
.vine-list-table-table-class td {
    padding-left: 0;
    vertical-align: middle;
    display: table-cell;
    height: 64px;
}

.vine-list-table-table-class th {
    padding-left: 0;
    vertical-align: middle;
    display: table-cell;
    height: 64px;
}

/* Config placeholder and identifier css[7] */
/* .vine-list-table-table-head { } */

/* Config placeholder and identifier css[8] */
/* .vine-list-table-table-body{ } */

/* ListTable title showing deal name in Deal Collaborators dialog */
.vine-deal-collaborator-list-table-title {
    font-size: medium;
    font-weight: 700;
    text-decoration: underline;
}

/*
 * Accordion styling, often used in View ListTables. 
 * These are used to override Bootstrap styling
 */

/* .vine-accordion { } */
.vine-accordion-item {
    background-color: white;
}

/* .vine-accordion-header { }  */
/*.vine-accordion-button { } */
/* .vine-accordion-button:before {} */
/* .vine-accordion-button:after {} */
/* .vine-accordion-button { } */
/*.vine-accordion-button { } */
/* .vine-accordion-button.collapsed:after { } */
/* .vine-accordion-button:hover { } */
/* hover seems to be handled on table row */
/* .vine-accordion-body { } */

/* Use vine-accordion classes _instead_ of Bootstrap accoridon classes */
/* NOTE the mouse-over background/shadow is coming from the TD tag
  *     via the table>:not(caption)>*>* setting  (pasted below)
  */
/*
  table>:not(caption)>*>* {
    padding: .5rem .5rem;
    background-color: var(--bs-table-bg);
    border-bottom-width: 1px;
    box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);
 }
 */

/* Default outer div styling for the Paginator Widget */
.pag-div {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

/* Paginator numbers */
.pag-num {
    width: 40px;
    color: lightgray;
    display: inline-block;
    user-select: none;
}

/* Paginator emphasized numbers */
.pag-num-emphasize {
    font-weight: bold;
    color: black !important;
}

/* Paginator previous indicator */
.pag-prev {
    padding-top: 8px;
    vertical-align: bottom;
    user-select: none;
}

/* Paginator next indicator */
.pag-next {
    padding-top: 8px;
    vertical-align: bottom;
    user-select: none;
}

/* Paginator ellipsis indicator */
.pag-ellipsis {
    width: 40px;
    color: gray;
    display: inline-block;
    user-select: none;
    text-align: center;
    letter-spacing: 2px;
}

/* Paginator disabled prev/next (on first/last page) */
.pag-disabled {
    opacity: 0.3;
    pointer-events: none;
}

.vine-collapse-toggle {
    position: relative;
}

/* Keep this stylistically in-sync with vine-view-link-label */
.inline-widget-container-title {
    position: relative;
    width: 100%;
    min-height: 40px;
    left: -3px;
    /* for the chevron */
    font-weight: 700;
    font-size: inherit;
    display: inline-flex;
    padding-top: 8px;
}

/* When there is a milestone progress bar in an inline widget container title, put some space before the progress bar */
.inline-widget-container-title .milestone-completed-tally {
    margin-left: 1em;
}

/* Shifts title text a bit left to line up with regular labels */
.inline-widget-container-title-text>.vine-view-label {
    margin-left: -0.5rem;
}

.inline-widget-container-table {
    width: 100%;
}

.inline-widget-container {
    display: inline-block;
    width: 100%;
}

.inline-widget-container-toggle {
    position: relative;
    /* TODO Removing relative fixes the chevron disappearing */
    padding-top: 0.2rem;
    left: -1.625rem;
    transition: transform 333ms ease-out;
}

.inline-widget-container-toggle-down {
    top: -0.2rem;
    /* moves the rotated chevron up a bit to stay aligned with the text */
    transform: rotate(+90deg);
}

/* Inline widget contentDivId that all the content hangs off of*/
/* Creates an indent level from the left */
.vine-inline-widget-content-anchor {
    margin-left: 2.5rem;
}

/* Don't indent inline content (if any) when the row is collapsed 
   for example, the address widget and widgets with preview states */
.vine-header-row-collapsed .vine-inline-widget-content-anchor {
    margin-left: 0rem;
}

/*Styling for font awesome icons when used in a 'before' pseudo element
 see https://fontawesome.com/v5/docs/web/advanced/css-pseudo-elements*/
/*Font Awesome icon used for widget container collapse */
/*
.inline-widget-container-toggle::before {
  position: relative;
  top: 3px;
  font-family: "FontAwesome";
  font-weight: 900;
  height:max-content;
  content: "\f054";
  transition: transform 333ms ease-out;
}

.inline-widget-container-toggle.rotate-down::before {
  transform:rotate(+90deg)
}
*/

/*Styling for 'address01' inline widget*/
.widget-address01 {
    display: inline-table;
}

.widget-address01 table {
    width: 100%;
}

.widget-address01-label {
    display: inline-block;
    position: relative;
    font-weight: bold;
}

/* Map container <img> */
.vine-address01-map {
    max-width: 100%;
    border: 1px solid lightgray;
    border-radius: 8px;
}

.widget-address01-address-span {
    display: inline-block;
    vertical-align: top;
    /* padding-left: 8px; */
    /* Indent now handled by the outer container */
}

.widget-address01-map-span {
    display: inline-block;
    padding-left: 8px;
    padding-right: 8px;
}

.widget-document-one-line {
    width: 100%;
    display: table;
}

/*.widget-document-one-line-col1 {}*/

.widget-document-one-line-col2 {
    padding-left: 8px;
}

.widget-documentOneLine-label {
    padding-left: 4px;
    display: inline-block;
}

.list-table-multi-col-span {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/*sets a label span in a List table to 100% of available.
Important as the net width is used by some widgets such as address01
in order to calculate their own width post-render*/

.vine-view-label {
    display: inline-block;
    max-width: 400px;
    margin: 0;
    border: 0;
    padding: 0;
}

td:has(.vine-view-label) {
    width: 40%;
}

.remove-fact-list-select {
    font-style: italic;
    text-align: center;
}

.reminder-fact-list {
    margin-top: .5em
}

.vine-reminder-instance-container {
    width: 100% !important;
    max-height: 12em;
    overflow: auto;
}

.reminder-instance-row {
    display: block;
}

.reminder-instance-row span {
    margin-right: 0.5em;
}

.reminder-instance-row:hover {
    background-color: #ddd;
}

.reminder-instance-row-selected {
    background-color: #ddd;
}

.reminder-instance-row-hidden {
    display: none;
}

.reminder-pending {
    position: relative;
    height: 20px;
    top: 0.29em;
    content: url("../img/circle-amber.svg");
}

.reminder-closed {
    position: relative;
    height: 20px;
    top: 0.29em;
    content: url("../img/circle-green.svg");
}

.reminder-overdue {
    position: relative;
    height: 20px;
    top: 0.29em;
    content: url("../img/circle-red.svg");
}

.reminder-historic-closed {
    position: relative;
    height: 20px;
    top: 0.29em;
    content: url("../img/circle-dark-blue.svg");
}

.reminder-historic {
    position: relative;
    height: 20px;
    top: 0.29em;
    content: url("../img/circle-light-blue.svg");
}


/* used in addition to view-view-label on view links */
/* Keep this stylistically in-sync with inline-widget-container-title-text */
.vine-view-link-label {
    font-weight: 700;
    font-size: inherit;
}

/*similar purpose but for use in add/edit modal / widget*/
.vine-edit-label {
    /*width: 30%; */
    /* Causes layout problems when the screen resizes */
    display: inline-block;
    margin: 0 0 0 0.25rem;
    /* left margin */
    border: 0;
    padding: 0;
}

/* Boolean checkbox. Adds top padding to align it vertically 
   with other items in our View row configuration. 
   The Bootstrap class has other values that are also used */
/* NOTE there are still issues with the DIV around this being to wide */
/* Eads July 13, 2023 - Bootstrap form-check colliding with this, renaming ours to override BS */
/* This wraps multiple checkboxes grouped together, COMPOSITE */
.vine-checkbox-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* This wraps the second column in ListTable checkboxes, the box, optional label and action menu */
.vine-boolean-wrapper {
    display: -webkit-box;
    flex-direction: row;
    justify-content: space-between;
}

.vine-form-check {
    padding-top: 0.5rem;
    padding-left: 0rem;
    /* Override Bootstrap */
    max-width: 40rem;
    order: 1;
}

/* The optional label right next to the checkbox */
.form-check-subLabel {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

/* The action menu icon */
.vine-editicons {
    min-height: 40px;
    order: 2;
    /* for whe in display: flex container */
    float: right;
    /* for when in display: block container */
}

/* Wraps the contents of vine-editicons, for layout control */
.vine-editicons-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: right;
    /* horizontal control when flex-direction: row */
    align-items: center;
    /* vertical control when flex-direction: row */
    height: 100%;
    /* use all the space our parent gives us so we can center vertically */
}

/* default formatting for reusable inline Are You Sure control */
.vine-areYouSure-inline {
    display: flex;
    flex-direction: row;
    justify-content: right;
    align-items: center;
    height: 100%;
}

/* 
 * Put chevron out left in the whitespace, 
 * with bigger width & negative left margin 
 */
.vine-accordion-item {
    width: 110%;
    margin-left: -2rem;
    margin-bottom: 0;
}

.vine-accordion-item:first-of-type {
    border-top-left-radius: 0.25rem;
    border-top-right-radius: 0.25rem;
}

.vine-accordion-item:first-of-type .vine-accordion-button {
    border-top-left-radius: calc(0.25rem - 1px);
    border-top-right-radius: calc(0.25rem - 1px);
}

.vine-accordion-item:not(:first-of-type) {
    border-top: 0;
}

.vine-accordion-item:last-of-type {
    border-bottom-right-radius: 0.25rem;
    border-bottom-left-radius: 0.25rem;
}

.vine-accordion-item:last-of-type .vine-accordion-button.collapsed {
    border-bottom-right-radius: calc(0.25rem - 1px);
}

/* .vine-accordion-header {  } */
.vine-accordion-body {
    padding: 1rem 1.25rem;
}

.vine-accordion-button {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 1.25rem 1.25rem 1.25rem 0.25rem;
    /* left is last item */
    font-size: 1rem;
    color: #212529;
    text-align: left;
    background-color: #fff;
    border: 0;
    border-radius: 0;
    overflow-anchor: none;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out,
        box-shadow 0.15s ease-in-out, border-radius 0.15s ease;
}

.vine-accordion-button.collapse {
    border-bottom-right-radius: 0.25rem;
    border-bottom-left-radius: 0.25rem;
}

.collapse:not(.show) {
    display: none;
}

.collapse.show {
    display: block;
}

.vine-accordion-button:before {
    order: -1;
    /* Reverse the flex layout order put it on the left */
    /*padding-left: -0; */
    /* Override Bootstrap and help margin shift chevron left of item */
    margin-left: 0;
    /* Override Bootstrap right alignment (margin-left:auto), use 0 default */
    margin-right: 0.5em;
    /* put a space after the chevron and before text */
    background-image: url("../img/chevron-right.svg");
    /* Override Bootstrap */
}

.vine-accordion-button:after {
    order: -1;
    /* Reverse the flex layout order put it on the left */
    margin-left: 0;
    /* override Bootstrap right alignment (margin-left:auto) */
    margin-right: 0.5em;
    /* put a space after the chevron and before text */
    background-image: url("../img/chevron-right.svg");
    /* Override Bootstrap */
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    /*margin-left:auto;*/
    /* Bootstrap does this, we don't want that */
    content: "";
    transition: transform 0.2s ease-in-out;
}

.vine-accordion-button.collapsed {
    color: black;
}

.vine-accordion-button:not(.collapsed) {
    color: black;
    background-color: white;
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.125);
}

.vine-accordion-button:not(.collapsed):after {
    background-image: url("../img/chevron-right.svg");
    /* Override Bootstrap */
    transform: rotate(90deg);
}

.vine-accordion-button:hover {
    z-index: 2;
}

.vine-accordion-button:focus {
    z-index: 3;
    /*border-color:#86b7fe;*/
    border-color: var(--vineGreen);
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.milestone-success {
    color: white;
    font-weight: 400;
    background-color: #198754;
}

.milestone-todo {
    color: black;
    font-weight: 400;
    background-color: darkgrey;
}

.milestone-alert {
    color: white;
    font-weight: 400;
    background-color: #dc3545;
}

/*prevent row inheriting row style from list table*/
.milestone-progress-row {
    border: 0 !important;
    height: unset !important;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.milestone-progress-row td {
    display: inline-block;
    padding: 0;
    height: unset;
    font-weight: 500 !important;
}

.milestone-completed-tally {
    margin-right: 8px;
    font-size: 0.9em;
}

.milestone-progress-bar {
    width: 4rem;
    height: 16px;
    vertical-align: middle;
    margin-top: 0.18rem;
    margin-bottom: auto;
}

@media (min-width: 991) {
    .milestone-progress-bar {
        width: 8rem;
    }
}

/* Dynamic View Icons and Styling */
.icon-add {
    content: "+";
    vertical-align: middle;
    color: var(--vineGreen);
}

.icon-back {
    content: url("../img/arrow-back.svg");
    vertical-align: middle;
}

.icon-forward {
    content: url("../img/arrow-right.svg");
    vertical-align: middle;
}

.vine-reminder-instance-controls {
    float: right;
}

.icon-chevron-left {
    content: url("../img/chevron-left.svg");
}

.icon-chevron-left-light {
    content: url("../img/chevron-left.svg");
    opacity: 0.3;
}

.icon-chevron-right {
    content: url("../img/chevron-right.svg");
}

.icon-chevron-right-light {
    content: url("../img/chevron-right.svg");
    opacity: 0.3;
}

.icon-document {
    content: url("../img/document.svg");
    vertical-align: middle;
}

.icon-upload {
    content: url("../img/upload.svg");
    vertical-align: middle;
}

.icon-eye {
    content: url("../img/eye.svg");
    vertical-align: middle;
    padding-right: 3px;
}

.icon-check {
    content: url("../img/check.svg");
    vertical-align: middle;
}

.icon-undo {
    content: url("../img/undo.svg");
    vertical-align: middle;
}

.icon-chevron-down {
    content: url("../img/chevron-down.svg");
    vertical-align: middle;
}

.icon-chevron-up {
    content: url("../img/undo.svg");
    /* don't have chevron up icon yet*/
    vertical-align: middle;
}

.icon-delete {
    content: url("../img/delete.svg");
    vertical-align: middle;
}

.icon-flag {
    content: url("../img/flag.svg");
    vertical-align: middle;
}

.icon-minus {
    content: url("../img/minus.svg");
}

.icon-milestone-unachieved {
    margin-left: 5px;
    content: url("../img/flag.svg");
    vertical-align: middle;
    width: 21px;
    filter: var(--vineLightGreyFilter);
}

.icon-milestone-achieved {
    margin-left: 5px;
    content: url("../img/flag-check.svg");
    vertical-align: middle;
    width: 21px;
}

.icon-flag-slash {
    content: url("../img/flag-slash.svg");
    vertical-align: middle;
}

.icon-flag-check {
    content: url("../img/flag-check.svg");
    vertical-align: middle;
}

.icon-gearshape-view {
    content: url("../img/gearshape.svg");
    vertical-align: middle;
    width: 20px;
    margin-top: 12px;
}

.icon-more {
    content: url("../img/more.svg");
    vertical-align: middle;
}

.icon-pencil {
    content: url("../img/pencil.svg");
    vertical-align: middle;
    height: 12px;
    margin-top: 3px;
    padding-right: 5px;
}

.icon-calendar {
    content: url("../img/calendar.svg");
    vertical-align: middle;
    height: 12px;
    margin-top: 3px;
    padding-right: 5px;
}

.icon-person {
    content: url("../img/person.svg");
    vertical-align: middle;
}

.icon-person-add {
    content: url("../img/person-add.svg");
    vertical-align: middle;
}

.icon-square-arrow-up {
    content: url("../img/square.and-arrow.up.svg");
    vertical-align: middle;
    height: 23px;
    padding-right: 4px;
}

.icon-person-assignee {
    margin-left: 3px;
    content: url("../img/person.svg");
    vertical-align: middle;
    width: 20px;
    filter: var(--vineLightGreyFilter);
}

.icon-square-arrow-up {
    content: url("../img/square.and.arrow.up.svg");
    vertical-align: middle;
}

.icon-link-external {
    content: url("../img/arrow.up.right.square.svg");
    vertical-align: middle;
}

.in-field-icon {
    padding-right: 8px;
    padding-left: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
}

@font-face {
    font-family: "Gotham";
    src: url("../fonts/GothamBold/font.woff2") format("woff2"), url("../fonts/GothamBold/font.woff") format("woff");
    font-display: swap;
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: "Gotham";
    src: url("../fonts/GothamBoldItalic/font.woff2") format("woff2"),
        url("../fonts/GothamBoldItalic/font.woff") format("woff");
    font-display: swap;
    font-weight: 700;
    font-style: italic;
}

@font-face {
    font-family: "Gotham";
    src: url("../fonts/GothamMedium/font.woff2") format("woff2"), url("../fonts/GothamMedium/font.woff") format("woff");
    font-display: swap;
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: "Gotham";
    src: url("../fonts/GothamLight/font.woff2") format("woff2"), url("../fonts/GothamLight/font.woff") format("woff");
    font-display: swap;
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: "Gotham";
    src: url("../fonts/GothamMediumItalic/font.woff2") format("woff2"),
        url("../fonts/GothamMediumItalic/font.woff") format("woff");
    font-display: swap;
    font-weight: 500;
    font-style: italic;
}

@font-face {
    font-family: "Gotham";
    src: url("../fonts/GothamBook/font.woff2") format("woff2"), url("../fonts/GothamBook/font.woff") format("woff");
    font-display: swap;
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "Gotham";
    src: url("../fonts/GothamBookItalic/font.woff2") format("woff2"),
        url("../fonts/GothamBookItalic/font.woff") format("woff");
    font-display: swap;
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: "Gotham";
    src: url("../fonts/GothamLightItalic/font.woff2") format("woff2"),
        url("../fonts/GothamLightItalic/font.woff") format("woff");
    font-display: swap;
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: "Bebas Neue";
    src: url("../fonts/BebasNeueProLight/font.woff2") format("woff2"),
        url("../fonts/BebasNeueProLight/font.woff") format("woff");
    font-display: swap;
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: "Bebas Neue";
    src: url("../fonts/BebasNeueProBook/font.woff2") format("woff2"),
        url("../fonts/BebasNeueProBook/font.woff") format("woff");
    font-display: swap;
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "Bebas Neue";
    src: url("../fonts/BebasNeueProBold/font.woff2") format("woff2"),
        url("../fonts/BebasNeueProBold/font.woff") format("woff");
    font-display: swap;
    font-weight: 700;
    font-style: normal;
}

/* Grouped fact history — result container: scroll horizontally if many columns, cap height vertically */
.vine-history-result {
    overflow-x: auto;
    overflow-y: auto;
    max-height: 260px;
}

/* Grouped fact history — record table: don't collapse too narrow, let it scroll inside the container */
.vine-history-record-table {
    min-width: 100%;
    width: max-content;
    table-layout: auto;
}

/* Keep individual cells from becoming excessively wide */
.vine-history-record-table th,
.vine-history-record-table td {
    white-space: nowrap;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Grouped fact history — highlighted row (resolved date match) */
.vine-history-highlight {
    background-color: var(--vinePaleGreen) !important;
}

/* Read-only banner for core-resident collateral items */
.vine-readonly-banner {
    background-color: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 4px;
    color: #856404;
    font-size: 13px;
    padding: 8px 14px;
    margin: 8px 0 4px 0;
    width: 100%;
    box-sizing: border-box;
}