/* Dump file. At the moment, every style goes here */
/* The plan is to move styles to separate appropriate files */

main {
  background-color: var(--secondary-background);
}

.container {
  margin: 0 auto;
  padding: 1em;
  width: 960px;
}

.whitebox {
  -moz-border-radius: 0.4em;
  -moz-box-shadow: 0 0 0.5em #ccc;
  -webkit-border-radius: 0.4em;
  -webkit-box-shadow: 0 0 0.5em #ccc;
  background-color: #ffffff;
  background-image: none;
  /* border: 1px solid #ccc; */
  /* border-radius: 0.4em; */
  /* box-shadow: 0 0 0.4em #ccc; */
  min-height: 420px;
}

.informationsign {
  color: #86b7fe;
  font-size:15px;
}

.informationsign.invalid-model:not(.userentry) {
  color: red;
}


.align_left {
  display: inline-block;
  clear: none;
  margin-right: 1em;
}

.align_right {
  display: inline-block;
  clear: none;
  margin-left: 1em;
}

#root {
    margin-left: 65px;
}
@media screen and (max-width: 992px) {
    #root {
        margin-left: 0;
    }
}

div.posrel {
  position: relative; /*makes the div a positioned element so others can absolute to it (even though div itself renders no different than without this line)*/
}

div.noverticalspace {
  height: 0;
  overflow: hidden;
  margin-top: 0!important;
  margin-bottom: 0;
  background-color: white!important; /*useful so tinted frames don't show even a hint of tinting when noverticalspace*/
}

span.vertical-center {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

#submitEmail {
  margin-top: 5px;
}

div.linkedtable-contain {
  margin: 20px 0;
}

div.linkedtable-contain table.ui-widget.ui-widget-content {
  border: none;
}

div.linkedtable-contain table {
  margin: 1em 0;
  border-collapse: collapse;
  width: 100%;
}

div.linkedtable-contain table td,
div.linkedtable-contain table th {
  padding: 0.6em 10px;
  text-align: left;
}

div.linkedtable-contain table thead tr {
  background: #F4F4F4;
}

div.linkedtable-contain table tbody tr {
  border-bottom: 1px solid #eee;
}

.linkedtable-contain h1 {
  font-size: 18px;
  font-weight: bold;
}

.ui-dialog {
  z-index: 100;
}

.ui-dialog .ui-state-error {
  padding: 0.3em;
}

.validateTips {
  border: 1px solid transparent;
  padding: 0.3em;
}

.field-error {
  padding-top: 5px;
  color: red;
  font-size: 120%;
}

/* Used for #hestable-table errors*/
.field-error2 {
  padding-top: 5px;
  color: blue;
  font-size: 120%;
}

.littlefont {
  font-size: 12px;
  line-height: 15px;
}

.ui-state-stale {
  color: lightgray;
}

.ui-widget-content {
  border-color: #202020;
}

input.redbox, select.redbox {
  border-color: red!important;
  border-width: medium;
}

input.readonly, select.readonly {
  border-color: lightgray;
  background-color: #f8f8f8;
}

input.invalid-model:not(.userentry) {
  text-decoration: line-through;
}

input.optimiserentry {
   font-style: italic
}

input.coolfocus:focus {
  border-color: #66afe9;
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
    0 0 8px rgba(102, 175, 233, 0.6);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
    0 0 8px rgba(102, 175, 233, 0.6);
}

.container .container-lg {
  margin: 0px auto;
  font-size: 14px;
}

label.inline {
  display: inline;
}

#submitEmail.disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

input.value {
  display: inline;
  border: 0;
  background: transparent;
}

input.checkbox {
  display: block;
  width: 20px;
  height: 46px;
}

input.checkbox.inline {
  display: inline;
  width: 20px;
  height: 15px;
  margin-left: 5px;
  margin-bottom: 3px;
  vertical-align: middle; /* a small bottom margin and a middle vertical align moves it just enough */
}

select.inline {
  display: inline;
  width: 200px;
  line-height: 0.8;
  margin-left: 5px;
  margin-bottom: 17px;
}

select.two-options {
  border-color: #8ae;
  text-align: center;
  line-height: 1.2;
}

select.two-options:hover {
  background: var(--main-active-color);
  color: var(--white);
}

#div-middletabs {
    margin-left: 30px;
}

@media screen and (min-width: 993px) {
    #div-middletabs .row {
        --bs-gutter-y: 0.5rem;
    }
}

#div-project, #div-middletabs > div {
  margin: 15px 0;
}

#div-project, #div-middletabs > div .group {
  margin: 15px 0;
  box-shadow: var(--box-shadow);
  border-radius: 6px;
}

#div-project {
  margin-top: 2px;
}

#my-accordion {
  padding: 0 20px;
  padding-top: 65px;
  position: absolute;
  overflow-y: scroll;
  overflow-x: hidden;
  top: 70px;
  left: 205px;
  right: 0;
  bottom: 0;
}
@media screen and (max-width: 992px) {
    #my-accordion {
        padding: 0;
        left: 0;
        top: 112px;
    }
}

.top-button + .top-button {
  margin-left: 16px;
}

#form input, input.test.form-control, .my-accordion input.text, input.number, select.form-control {
  border-radius: 6px;
  padding: 10px;
  border-width: 1px;
  border-style: solid;
  border-color: #aaaaaa;
}

#form label {
  font-size: 15px;
}

#form label.autofield {
  color: red;
}

#form label.autofield:after {
  content: 'Auto';
  font-size: 18px;
}


  .custom-combobox {
    position: relative;
    display: inline-block;
  }
  .custom-combobox-toggle { /*the down arrow 'a' link*/
	margin-left: -1px;
	margin-top: -.1em;
	padding: 1.1em 1em 1em 1em !important;
	border-bottom-right-radius: 6px!important;
	border-top-right-radius: 6px!important;
  }
  input.custom-combobox-input {
    margin: 0;
    padding: 5px 10px;
    background-color: white!important;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  }
  input.custom-combobox-input:focus {
  color: #212529;
  background-color: #fff;
  border-color: #86b7fe;
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
  }
  .ui-autocomplete {
     max-height: 400px;
     overflow-y: auto;
     /* prevent horizontal scrollbar */
     overflow-x: hidden;
  }

option.table-error-class {
  color: red;
}

#div-middletabs .group + .group {
  margin-top: 16px;
}

.create-via-dialog {
  margin-top: 12px
}

/* Radio list (controltype radiolist / spreadsheet alias radio) */
.zs-radiolist-row {
  margin-bottom: 0.2rem;
}
.zs-radiolist-label {
  cursor: pointer;
  margin-right: 1.25rem;
  font-weight: normal;
}

.inside-banner {
  position: absolute;
  top: 17px;
  right: 40px;
}

/* "Specify Improvement" (bannercheckbox) — label is clickable via for=; style like a link so the whole text reads as the hit target */
.inside-banner label[for] {
  font-size: 1.08em;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  user-select: none;
}
.inside-banner label[for]:hover {
  color: #0a58ca;
  text-decoration-thickness: 2px;
}
.inside-banner label[for]:active {
  color: #084298;
}

@media screen and (max-width: 400px) {
  .inside-banner {
    position: static;
  }
}


.invisible-page {
  display:none;
}

.is-frame {
  padding-bottom: 10px;
}
.is-frame-idea {
  border-radius: 6px;
  box-shadow: var(--box-shadow);
  /*margin-top: 10px !important;*/
}

.frame-title {
    text-align: left;
    width: 100%;
    font-size: 13pt;
    color: black;
    /*margin-top: 10px !important; decided to make this individualized per frame*/
    /*letter-spacing: 2px;*/
    /*word-spacing: 10px;*/
}

.forms-dialog, .forms-dialog .ui-dialog-title, .confirm-dialog .ui-dialog-title {
  text-align: center;
  width: 100%;  /*this line makes it so that dialog is responsive to (outer) window resizing*/
}

.forms-dialog {
  /* The styling of the pdf forms dialog - especially the header - breaks if the dialog gets narrower
    than this. Ideally we should redesign the dialog to work nicely at narrower viewport widths,
    but a min-width at least keeps it from being unusable in mobile */
  min-width: 320px;
}

.confirm-dialog h3 {
  font-size: 16px;
  margin-top: 5px;
  margin-bottom: 0;
}


/* styles for viewtables */
div.dataTables_wrapper {
    margin: 0 auto;
}
td.widecell400::before {
    content: '';
    display: block;
    min-width: 400px;
}
table.dataTable.compact th.widecell400,table.dataTable.compact tbody td.widecell400 {
  padding-left: 30px;
}
td.widecell500::before {
    content: '';
    display: block;
    min-width: 500px;
}
table.dataTable.compact th.widecell500,table.dataTable.compact tbody td.widecell500 {
  padding-left: 30px;
}
td.widecell600::before {
    content: '';
    display: block;
    min-width: 600px;
}
table.dataTable.compact th.widecell600,table.dataTable.compact tbody td.widecell600 {
  padding-left: 30px;
}
a.toggle-vis, a.toggle-set {
    cursor: pointer;
    color: #3174c7;
    text-decoration: none;
}
a.toggle-vis-bold, a.toggle-set-bold {
    font-weight: bold;
}
a.toggle-vis:hover, a.toggle-set:hover {
    text-decoration: underline;
}
tr.viewtableboldrow {
    font-weight: bold;
}
tr.viewtableblueboldrow {
    font-weight: bold;
    color: #3174c7;
}

/* Column toggles + Excel export below the DataTable */
.viewtable-div .viewtable-bottom-bar {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid #ddd;
    clear: both;
}

.viewtable-div .viewtable-bottom-bar .viewtable-column-toolbar {
    padding: 4px 0 6px 0;
}

.viewtable-div .viewtable-bottom-bar .dt-buttons {
    margin-top: 8px;
    margin-bottom: 0;
    float: none;
    clear: both;
}

.viewtable-div .viewtable-bottom-bar .dt-button {
    padding: 2px 8px;
    font-size: 12px;
    margin-right: 6px;
    line-height: 1.3;
}

/* Visibility: use jQuery .hide() / .show() only — do not set display:none here or jQuery 1.x may not override it. */
.zeus-geometry-footprint-banner {
    position: sticky;
    top: 0;
    z-index: 25;
    margin: 8px 12px;
    padding: 10px 12px;
    background: #fff8e6;
    border: 1px solid #e6b800;
    border-radius: 4px;
    color: #5c4a00;
    font-size: 0.95rem;
}

/* Toasts: live in #zeus-toast-stack (prepended to #my-accordion); width matches accordion column */
#zeus-toast-stack.zeus-toast-stack {
    position: sticky;
    top: 0;
    z-index: 30;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 0 0 8px 0;
    pointer-events: none;
}
.zeus-toast-stack .zeus-toast {
    pointer-events: auto;
}
.zeus-toast {
    position: relative;
    margin-top: 8px;
    padding: 10px 36px 10px 12px;
    border-radius: 4px;
    font-size: 0.95rem;
    line-height: 1.35;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    opacity: 1;
    transition: opacity 0.3s ease;
}
.zeus-toast--closing {
    opacity: 0;
}
.zeus-toast__close {
    position: absolute;
    top: 4px;
    right: 6px;
    margin: 0;
    padding: 2px 8px;
    border: none;
    background: transparent;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    color: inherit;
    opacity: 0.75;
}
.zeus-toast__close:hover,
.zeus-toast__close:focus {
    opacity: 1;
}
.zeus-toast--warning {
    background: #fff8e6;
    border: 1px solid #e6b800;
    color: #5c4a00;
}
.zeus-toast--info {
    background: #e7f1ff;
    border: 1px solid #6b9bd1;
    color: #163a5c;
}
.zeus-toast--error {
    background: #ffe8e8;
    border: 1px solid #c62828;
    color: #5c1010;
}
.zeus-toast--success {
    background: #e8f5e9;
    border: 1px solid #2e7d32;
    color: #1b3d1d;
}

.invisible-photo {
    display: none;
}

#div-utilitiess input[type='date']:not(.optimiserentry) {
    border: 2px solid black;
}

/* Styles for the loading overlay created by showLoadingOverlay() */
#loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.25);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}
#loading-overlay img, .loading-overlay-container img {
    width: 100px;
    height: 100px;
}
#loading-overlay-container, .loading-overlay-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}
#loading-overlay-text, .loading-overlay-text {
    color: white;
    margin-top: 10px;
    text-align: center;
    max-height: 70vh; /* Prevent from clipping off the top of the window for long messages */
}

.vertically-centered { /*only works when this item's parent has an absolute height*/
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

#project-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 0;
    cursor: default;
    white-space: nowrap;
}

/* It's really hard within React to get the Mantine Select dropdown
   to style itself how we want, so we do it out here in raw CSS where
   we can address it directly */
.project-select-filter .mantine-Input-rightSection {
    display: none;
}
.project-select-filter .mantine-Input-icon {
    left: auto;
    right: 15px;
    font-size: 18px;
}

#div-major-error {
    padding: 20px;
}
#div-fairly-major-error {
    padding-bottom: 20px;
}

.viewtable-div {
    position: absolute;
    left: 2px;
    right: 0;
    top: 70px;
    bottom: 0;
    overflow: auto;
    padding: 50px;
    background-color: white;
}

#viewtable-selector {
  top: 75px;
}

#viewreports-area {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.nav-bar-link-alt {
    display: inline-block;
}

/* Add a margin to table pagination to make room for Tawk button */
div[class^="App_table"] div.mantine-Group-root button.mantine-Pagination-item:last-of-type {
  margin-right: 80px;
}

/* Export button for Datatables (lives in .viewtable-bottom-bar) */
#viewsummary-table .viewtable-bottom-bar .dt-buttons {
  float: left;
  clear: both;
}

#measureTotalCost\:temp-measure {
  width: 120px;
}

#ImportBillsFuel\:idutilityBills1, #ImportBillsElec\:idutilityBills1 {
  margin-bottom: 10px;
  margin-top: 10px;
}

#example-viewtable-div.isQA-table .dataTables_filter {
  float: left;
  text-align: left;
}

.isQA-table .dataTables_filter label {
    display: flex;
    align-items: center;
    gap: 0.5em;
}

@media screen and (max-width: 992px) {
    /* This causes the close button of the Pdf Viewer dialog to render significantly larger on
       mobile devices so that it is easier to click */
    .ui-dialog button.ui-dialog-titlebar-close {
        height: 35px;
        width: 35px;
        margin-top: -18px;
    }

    #div-middletabs {
        margin-left: 10px;
        margin-right: 10px;
        margin-top: 80px;
    }

    .viewtable-div {
        padding-left: 10px;
        padding-right: 10px;
        padding-bottom: 0;
    }

    #example-viewtable-div {
      padding-top: 80px;
    }

    #viewtable-selector {
      top: 120px;
    }
}

@media screen and (max-width: 480px) {
  #div-middletabs {
      margin-top: 80px;
  }

  .isQA-table td.widecell600 {
    width: 220px;
    max-width: 220px;
    min-width: 140px;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .isQA-table .dataTables_scrollHead th.widecell600 {
    width: 220px;
    max-width: 220px;
    min-width: 140px;
    white-space: normal;
  }

  .isQA-table .dataTables_scrollHead th:nth-child(1),
  .isQA-table td:nth-child(1) {
    width: 48px;
    max-width: 48px;
  }

  .isQA-table .dataTables_scrollHead th:nth-child(3),
  .isQA-table td:nth-child(3) {
    width: 56px;
    max-width: 56px;
  }

  .isQA-table tr td:first-child span {
    display: block;
    margin-bottom: 4px;
  }

  #example-viewtable-div.isQA-table .dataTables_info {
    text-align: left;
    float: left;
  }

  #example-viewtable-div.isQA-table .dataTables_paginate {
    text-align: left;
    float: none;
    display: block;
    clear: both;
    margin-top: 0.5em;
  }

  #example-viewtable-div.isQA-table .dataTables_paginate a.previous {
    padding-left: 0px;
  }
}



.calibration-chart-wrapper{
    padding-top: 25px;
    padding-bottom: 25px;
}

/* need this to override the inline style being applied */
.frame-incentives-hide {
    display: none !important;
}

#offline-warning {
    color: darkgoldenrod;
}

/* Text search on the Project Data page */
.highlighted-search-text {
    background-color: #fffcb0;
}

.highlighted-search-text-current {
    background-color: yellow;
}

.save-sync-project i {
    margin-right: 11px;
}

/* Collapse to 0 width when ALL direct children are display:none */
.col-sm-2.posrel.noverticalspace:not(:has(> :not([style*="display: none"]))),
.col-sm-3.posrel.noverticalspace:not(:has(> :not([style*="display: none"]))) {
  flex: 0 0 0 !important;
  max-width: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  overflow: hidden;
}

/*make a group-table invisible when draped*/
@media screen and (min-width: 577px) {
   div.invisible-draped {
      display: none
   }
}
@media screen and (max-width: 576px) {
   #drapery-three-dot-menu-item {
      display: none
   }
}

div.invisible-wrong-stage {
   display: none
}

#change-stage {
    line-height: 2;
    overflow: auto;
    padding-top: 4px;
    padding-bottom: 4px;
    float: left;
    margin-left: 5px;
}

.project-address {
    display: block;
    font-size: 12px;
    font-weight: normal;
}

.project-title-and-address-container {
    float: left;
    line-height: 1.2;
    margin-top: 5px;
}

@media screen and (max-width: 992px) {
    #change-stage {
        max-width: calc(100vw - 195px);
        text-overflow: ellipsis;
        overflow: hidden;
    }

    span.project-address {
        left: 6px;
        top: 38px;
    }

    .project-title-contents {
        max-width: 200px;
        text-overflow: ellipsis;
        overflow: hidden;
        font-size: 13px;
        font-weight: bold;
    }

    .page-control-buttons .control-button {
        padding: 0;
        width: 38px;
    }
    .page-control-buttons .control-button i {
        margin: 0 auto;
    }
    .page-control-buttons #testUpload {
        padding: 0;
    }

    #project-title {
        width: calc(100vw - 155px); /* Leave just enough space for the right-side buttons */
        font-size: 16px;
        display: inline-block;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3; /* Limits text to three lines */
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: break-word;
        line-height: 1.1; /* Adjust line-height as needed */
        max-height: calc(1.1em * 3); /* Limits to three lines */
        white-space: normal;
    }

    .project-title-and-address-container {
        margin-top: 5px;
        max-width: calc(100vw - 95px);
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        float: none;
        display: inline-block;

    }
}