.popover {
    max-width: 440px;
}

:root {
    --color-primary: #b7cfb7;          /* darkseagreen */
    --color-primary-dark: #475e47;
    --color-accent: seagreen;
    --color-bg: #fef9f5;
    --color-bg-light: #f5f5f5;
    --color-message: #729672;
    --color-shadow: #888888;
}

.selectize-control.form-control-sm .selectize-input.has-items {
    z-index: 1;
}

.dt-empty {
    text-align: left !important;
}

div.DTE_Field_Type_checkbox input,
div.DTE_Field_Type_radio input {
    vertical-align: middle;
    width: 30%;
}

/* Apply consistent height and padding to standard input fields */
table.dataTable td input:not(.dt-select-checkbox) {
    height: 35px !important;
    box-sizing: border-box;
    display: inline-block;
}

table.dataTable td.DTE_Inline input {
    height: 35px !important;
    padding: 0 5px !important;
    margin: 0 -5px !important;
    line-height: 35px !important;
    vertical-align: middle !important;
    box-sizing: border-box;
    background: #fff !important;
    border: 1px solid #80bdff !important;
    outline: none !important;
    width: calc(100% + 10px) !important;
}

/* Numeric inputs: right-aligned, padding matches cell padding */
div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=text],
div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type=number] {
    height: 35px !important;
    padding: 0 5px !important;
    margin: 0 -5px !important;
    line-height: 35px !important;
    vertical-align: middle !important;
    box-sizing: border-box;
    text-align: right !important;
    background: #fff !important;
    border: 1px solid #80bdff !important;
    outline: none !important;
    width: calc(100% + 10px) !important;
}

/* Apply consistent height and padding to select fields */
table.dataTable td select {
    height: 35px;
    box-sizing: border-box;
    vertical-align: top !important;
}

/* Apply consistent height and padding to select fields */
table.dataTable td {
    height: 35px;
    box-sizing: border-box;
}

/* Apply consistent height and padding to Selectize select fields */
table.dataTable td .selectize-control .selectize-input {
    min-height: 30px;
    box-sizing: border-box !important;
    display: inline-block !important;
    width: 100%;
    z-index: 1;
    vertical-align: top !important;
}

/* Style the checkbox to fit neatly */
.DTE_Field input[type="checkbox"] {
    width: auto;
    display: inline-block;
    vertical-align: top !important;
}

/* Adjust cell padding and overflow to fit content */
.dataTables_wrapper .dataTables_scrollBody {
    overflow-x: auto;
}

/* Ensure the editor input boxes fit within the table cell */
.DTE_Field input:not([type=checkbox]):not([type=radio]),
.DTE_Field select,
.DTE_Field textarea,
.DTE_Field text {
    width: 100%;
    height: 35px;
    max-width: 100%;
    box-sizing: border-box;
    vertical-align: top !important;
}

/* Target the Datatables Editor modal form */
.DTE .DTE_Body_Content {
    width: 80%;
    min-width: 1000px;
    margin: 0 auto;
}

/* Keep cell padding in edit mode, input has no padding so text stays in place */
table.dataTable td.DTE_Inline {
    vertical-align: middle !important;
}

/* Greyed-out appearance for read-only/disabled inline inputs */
table.dataTable td.DTE_Inline input:disabled,
table.dataTable td.DTE_Inline input[readonly],
div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input:disabled {
    background: #e9ecef !important;
    border: 1px solid transparent !important;
    cursor: default !important;
    color: #6c757d !important;
}

/* Zero out DTE wrapper padding/margin so input padding is the only spacing */
table.dataTable td.DTE_Inline div.DTE_Inline_Field,
table.dataTable td.DTE_Inline div.DTE_Field,
table.dataTable td.DTE_Inline div.DTE_Field > div {
    padding: 0 !important;
    margin: 0 !important;
}

/* Ensure the inline editor input fields align correctly */
table.dataTable td.DTE_Inline input,
table.dataTable td.DTE_Inline select,
table.dataTable td.DTE_Inline textarea {
    vertical-align: middle !important;
}


@media (min-width: 992px) {
    .modal-lg,
    .modal-xl {
        min-width: 1050px;
    }
}

.embodied_form {
    display: flex;
    flex-flow: row wrap;
}

.embodied_form fieldset {
    flex: 1;
    border: 1px solid #aaa;
    margin: 0.5em;
}

.embodied_form fieldset legend {
    padding: 5px 20px;
    border: 1px solid #aaa;
    font-weight: bold;
}

.embodied_form fieldset.inputs legend {
    background: var(--color-primary);
}

.embodied_form fieldset.outputs legend {
    background: var(--color-accent);
}

.embodied_form div.DTE_Field {
    padding: 5px;
}

.dt-button,
.buttons-create,
.buttons-edit,
.buttons-remove,
.copy-areas-btn,
.copy-ground-btn,
.copy-btn {
    font-size: 14px;
    margin-bottom: 10px;
    margin-right: 10px;
    border-radius: 5px !important;
}

input[type="range"] {
    width: 400px;
}

.table-striped tr:nth-child(even) {
    background-color: #F8F8F8;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.modal-body {
    position: static;
}

.button_table {
    width: 50px !important;
    text-align: center !important;
}

.button_table_wide {
    width: 200px !important;
    text-align: center !important;
}

.button_table_fix {
    position: absolute;
    width: 50px;
    text-align: center;
}

.fix {
    position: absolute;
    width: 100px;
    margin-left: -100px;
    vertical-align: middle !important;
}

.dwelling_drop {
    min-width: 180px;
    cursor: pointer;
}

@media (min-width: 1900px) {
    .dwelling_drop {
        min-width: 300px;
        cursor: pointer;
    }
}

@media (max-width: 1100px) {
    .project_disp {
        display: none;
    }
    .row.collapse {
        margin-left: -250px !important;
    }
    .dwelling_name {
        display: none;
    }
    #previous {
        display: none;
    }
    #next {
        display: none;
    }
    #thermal {
        display: none;
    }
}

body {
    height: 100vh;
    overflow-x: hidden;
}

#dwelling_select_small {
    display: none;
}

.form-check-label {
    font-size: 20px;
}

#table_wrapper {
    overflow: auto !important;
}

.table_wrapper {
    overflow: auto !important;
    margin-top: 20px;
}

.sidebar {
    max-width: 250px !important;
}

.nav {
    height: 100vh;
    min-width: inherit;
    max-width: inherit;
    overflow-y: scroll;
    overflow-x: hidden;
    padding-top: 70px;
    padding-bottom: 35px;
}

.navbar-nav {
    flex-direction: row;
}

.navbar {
    min-width: inherit;
    max-width: inherit;
    flex-direction: row;
    padding: 0 !important;
    justify-content: flex-start !important;
    z-index: 1;
}

p {
    margin-top: 10px;
    margin-bottom: 10px;
}

.no_data {
    margin: auto;
    top: 50%;
    left: 50%;
    width: 50%;
}

.messages {
    position: fixed;
    background-color: var(--color-message);
    z-index: 1000;
    top: 50%;
    left: 55%;
    padding-bottom: 15px;
    transform: translate(-50%, -50%);
    padding-right: 50px;
    border-radius: 5px;
    border-width: 20px;
    border-color: white;
    box-shadow: 10px 10px 20px -2px var(--color-shadow);
}

.container-fluid {
    padding: 0;
    margin: 0;
    background-color: var(--color-bg-light);
}

.select-items div,
.select-selected {
    padding-right: 5px;
}

.selectize-dropdown {
    width: auto !important;
    min-width: inherit !important;
    white-space: nowrap;
    padding-right: 5px;
    z-index: 100000;
    position: absolute !important;
}

.selectize-control {
    position: static !important;
    z-index: 1;
}

.selectize-input .item {
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 80%;
    vertical-align: middle;
    overflow: hidden;
    z-index: 1;
}

.selectize-dropdown, .selectize-dropdown.form-control {
    z-index: 100000;
}

.selectize-input {
    vertical-align: middle;
    z-index: 1;
}

.form-control {
    font-size: 15px;
    vertical-align: middle;
    padding: 5px 7px 5px 7px;
}

.input-group {
    vertical-align: middle;
    padding: 5px 7px 5px 7px;
}

.input-group-text {
    font-size: 15px;
}

.table:not(.inline) td {
    font-size: 14px;
    padding: 3px 7px 3px 7px;
    vertical-align: middle !important;
}

.table th {
    font-size: 14px !important;
}

.table td {
    font-size: 14px !important;
}

td.dt-type-numeric {
    text-align: right !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    padding-right: 30px !important;
}

.table thead {
    font-size: 15px;
    padding: 5px;
}

.table #no_border {
    border-style: none !important;
}

.table th {
    font-size: 15px;
    padding: 5px 7px 5px 7px;
    vertical-align: bottom !important;
}

table {
    width: 100% !important;
    border: hidden;
}

#thermal {
    padding: 0px;
    margin: 0px;
}

.wrapper {
    display: flex;
    width: 100%;
    height: 100%;
}

.top_nav {
    margin: 0 !important;
    padding: 0 !important;
    background-color: var(--color-primary);
    border-bottom: 2px solid grey;
    height: 60px;
}

/* Admin posted page notices. base.html moves these into the top of #content
   on load, so they inherit its clearance for the fixed bar and scroll with
   the page; only the gap below them is needed here. */
.site-messages {
    margin-top: 4px;
    margin-bottom: 18px;
    /* Hidden until base.html has moved them into #content. Without this they
       are painted where they are rendered - above #content, under the fixed
       bar - and visibly jump once the move runs. */
    display: none;
}

.site-messages.placed {
    display: block;
}

/* The certificate preview is a fixed A4 page that is scaled down to fit, never
   up, so on a wide monitor the pane is capped at A4's own width - otherwise the
   bordered box runs to the edge of the screen with the page adrift inside it.
   The bottom margin keeps the box clear of the footer. */
.epc-pane {
    max-width: 794px;
    margin-bottom: 40px;
}

#content {
    padding-top: 70px;
    padding-left: 50px;
    padding-right: 50px;
    background-color: var(--color-bg);
    min-height: 100%;
    outline: none !important;
    overflow-y: overlay;
    overflow-x: hidden;
    padding-bottom: 50px;
}

#content-top {
    padding-top: 70px;
    padding-left: 50px;
    padding-right: 50px;
    background-color: var(--color-bg);
    height: 70vh;
    resize: vertical;
    outline: none !important;
    overflow-y: scroll;
    overflow-x: hidden;
}

#content-bottom {
    bottom: 0 !important;
    padding-top: 10px;
    flex: 1;
    margin-top: 5px;
    padding-left: 50px;
    padding-right: 50px;
    background-color: var(--color-bg);
    outline: none !important;
    overflow-y: scroll !important;
    overflow-x: hidden;
}

.content_wrapper {
    min-height: 100vh;
    overflow: hidden;
    flex-grow: 1;
}

body.modal-open {
    height: 100vh;
    padding-right: 15px;
}

#calc {
    top: 35%;
    left: 44%;
    overflow: auto;
    position: fixed;
    z-index: 1;
    background-color: white;
}

#wait {
    top: 35%;
    left: 44%;
    overflow: auto;
    position: fixed;
    z-index: 1;
    background-color: white;
}

h6 {
    padding: 2px;
    margin: 0;
}

.modal-content {
    background-color: var(--color-bg-light);
}

.navbar-brand {
    height: 100%;
    max-width: 100%;
    text-align: center;
    position: relative;
}

#logo {
    max-width: 100%;
    max-height: 100%;
    height: 40px;
    padding-left: 30px;
}

#eccho_logo {
    max-width: 100%;
    max-height: 100%;
    height: 50px;
    padding-left: 60px;
}

.image_wrapper {
    top: 95%;
    position: absolute;
}

/* Center the loader */
#loader {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 10000;
    width: 100px;
    height: 100px;
    border: 10px solid grey;
    border-radius: 50%;
    border-top: 10px solid #3498db;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
    background-color: white;
}

@-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}

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

/* Create a custom checkbox */
.checkmark {
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    background-color: #eee;
}

/* On mouse-over, add a grey background color */
.checkmark:hover input ~ .checkmark {
    background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.checkmark input:checked ~ .checkmark {
    background-color: red !important;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    display: none;
}

/* Show the checkmark when checked */
.checkmark input:checked ~ .checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.checkmark .checkmark:after {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

#previous {
    color: black;
    position: fixed;
    width: 75px;
    top: 80px;
    right: 150px;
    margin-right: 5px;
    z-index: 1000;
}

#next {
    color: black;
    position: fixed;
    width: 75px;
    top: 80px;
    right: 50px;
    z-index: 1000;
}

.nav .nav-item .nav-link {
    color: #FFF;
    padding-top: 3px;
    padding-left: 25px;
    padding-bottom: 3px;
}

/* Consistent nav icon sizing */
.nav .nav-item .nav-link img {
    height: 22px !important;
    width: auto;
    object-fit: contain;
    /* The sidebar icons are black line art on a transparent background, while
       the sidebar itself is dark. brightness(0) flattens each icon to solid
       black, then invert(1) makes it white, matching the font icons and the
       link text. Only the transparent background is left untouched. */
    filter: brightness(0) invert(1);
}

.nav .flex-column {
    overflow: auto;
    justify-content: flex-start;
}

.nav .nav-item .dropdown-toggle {
    color: #FFF;
    padding-top: 3px;
    padding-bottom: 3px;
    width: 100%;
}

.nav .no_icon .nav-link {
    color: #FFF;
    padding-top: 3px;
    padding-left: 60px;
    padding-bottom: 3px;
    width: 100%;
    min-width: 150px;
}

#pageSubmenu1 {
    margin-left: 35px;
    list-style-type: square;
    width: 215px;
}

#pageSubmenu1 .nav-link {
    color: #FFF;
    padding-top: 5px;
    padding-left: 10px !important;
    width: 100%;
}

#pageSubmenu2 {
    margin-left: 35px;
    list-style-type: square;
    width: 215px;
}

#pageSubmenu2 .nav-link {
    color: #FFF;
    padding-top: 5px;
    padding-left: 10px !important;
    width: 100%;
}

#pageSubmenu3 {
    margin-left: 35px;
    list-style-type: square;
    width: 215px;
}

#pageSubmenu3 .nav-link {
    color: #FFF;
    padding-top: 5px;
    padding-left: 10px !important;
    width: 100%;
}

#pageSubmenu4 {
    margin-left: 35px;
    list-style-type: square;
    width: 215px;
}

#pageSubmenu4 .nav-link {
    color: #FFF;
    padding-top: 5px;
    padding-left: 10px !important;
    width: 100%;
}

#pageSubmenu5 {
    margin-left: 35px;
    list-style-type: square;
    width: 215px;
}

#pageSubmenu5 .nav-link {
    color: #FFF;
    padding-top: 5px;
    padding-left: 10px !important;
    width: 100%;
}

a[data-toggle="collapse"] {
    position: relative;
}

.dropdown-toggle::after {
    display: block;
    position: absolute;
    top: 50%;
    right: 18px;
    transform: translateY(-50%);
}

ul.nav > li > a:hover {
    background-color: var(--color-accent) !important;
    color: #FFFFFF;
    width: 100%;
}

ul.nav > li > ul > li a:hover {
    background-color: var(--color-accent) !important;
    color: #FFFFFF;
    width: 100%;
}

.btn {
    background-color: var(--color-primary);
    box-shadow: 0px 10px 20px -10px var(--color-shadow);
    border-radius: 5px;
}

.btn-primary:hover,
.btn-primary:focus {
    color: #fff;
    background-color: var(--color-primary-dark) !important;
    box-shadow: none;
}

.btn-outline-dark:hover,
.btn-outline-dark:focus {
    color: #fff;
    background-color: var(--color-primary-dark) !important;
    box-shadow: none;
}

td .btn {
    display: block;
    margin: auto;
}

#next:hover,
#next:focus,
#previous:hover,
#previous:focus {
    color: #fff;
    background-color: var(--color-primary-dark) !important;
}

.dropdown-toggle:active,
.open .dropdown-toggle {
    background-color: var(--color-accent) !important;
    color: black !important;
}

.navbar-default .navbar-nav .dropdown.open a:focus {
    background-color: var(--color-primary);
}

.flex-container {
    padding: 0;
    margin: 0;
    list-style: none;
    border: none;
    -ms-box-orient: horizontal;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -moz-flex;
    display: -webkit-flex;
    flex-wrap: wrap;
    align-items: center;
    padding-left: 20px;
}

h3 {
    padding-top: 10px;
}

.w-sidebar {
    min-width: 250px !important;
    min-height: 100vh;
    background-color: var(--color-primary-dark);
    align-items: normal !important;
    border-right: 2px solid grey;
    margin: 0;
}

.w-sidebar1 {
    margin: 0;
    max-width: 234px !important;
    min-width: 234px !important;
    height: 100% !important;
    border-right: 2px solid grey;
}

.row.collapse {
    margin-left: -250px;
    left: 0;
    transition: margin-left .15s linear;
}

.row.collapse.show {
    margin-left: 0 !important;
}

.row.collapsing {
    left: 0;
    transition: all .15s linear;
}

@media (max-width: 900px) {
    .row .collapse,
    .row .collapsing {
        margin-left: 250px !important;
        left: 0 !important;
        overflow: visible;
    }

    .row .collapse.show,
    .row .collapsing.show {
        margin-left: 0 !important;
        left: 0 !important;
    }

    .row .sidebar.collapse1 {
        display: flex !important;
        margin-left: -250px !important;
        transition: all .3s linear;
        position: fixed;
        z-index: 1;
        flex-basis: auto;
    }

    .row .sidebar.collapse1.show {
        height: 100vh;
        margin-left: 0 !important;
        left: 0 !important;
        min-width: 100% !important;
        border-right: 2px solid grey;
        position: fixed;
    }

    .row .sidebar.collapsing {
        display: flex !important;
        transition: all .3s linear !important;
        position: fixed;
        z-index: 1;
        border-right: 2px solid grey;
    }

    .row .sidebar.collapse {
        display: flex !important;
        margin-left: -250px !important;
        transition: all .3s linear;
        position: fixed;
        z-index: 1;
        flex-basis: auto;
    }

    .row .sidebar.collapse.show {
        display: flex !important;
        margin-left: 0 !important;
        height: 100vh;
        position: fixed;
        min-width: 250px !important;
        border-right: 2px solid grey;
        z-index: 1;
    }

    .row .sidebar.collapsing {
        display: flex !important;
        transition: all .3s linear !important;
        position: fixed;
        z-index: 1;
        border-right: 2px solid grey;
    }

    .results_disp {
        display: none !important;
    }

    #dwelling_select {
        display: none !important;
    }

    #dwelling_select_small {
        display: block;
    }

    .dwelling_drop {
        max-width: 50px;
    }

    .btn {
        background-color: #E5E4E2;
        margin-top: 10px;
        margin-left: 0px !important;
    }

    #content {
        padding-left: 25px;
        padding-right: 25px;
        left: 0 !important;
        position: fixed;
        max-height: 95% !important;
        overflow-y: overlay;
    }
}

#windows_editor {
    table-layout: fixed;
}

#windows_editor th.datasource-col,
#windows_editor td.datasource-col {
    min-width: 200px !important;
    width: 200px !important;
    max-width: 200px;
    white-space: normal;
}

#windows_editor th.glazing-col,
#windows_editor td.glazing-col {
    min-width: 200px !important;
    width: 200px !important;
    max-width: 200px;
    white-space: normal;
}

#windows_editor th.framing-col,
#windows_editor td.framing-col {
    min-width: 200px !important;
    width: 200px !important;
    max-width: 200px;
    white-space: normal;
}

#windows_editor th.qty-col,
#windows_editor td.qty-col {
    min-width: 80px !important;
    width: 80px !important;
    max-width: 80px;
}

table#windows_editor th.description-col,
table#windows_editor td.description-col {
    min-width: 200px !important;
    width: 200px !important;
    max-width: 200px !important;
    white-space: normal;
}

/* Left-align the first 4 columns in the table body */
#windows_editor td.description-col,
#windows_editor td.glazing-col,
#windows_editor td.framing-col,
#windows_editor td.area-col {
    text-align: left !important;
}

/* Left-align the first 4 columns in the table header */
#windows_editor th.description-col,
#windows_editor th.glazing-col,
#windows_editor th.framing-col,
#windows_editor th.area-col {
    text-align: left !important;
}

/* Left-align input/select in inline editing for those columns */
#windows_editor td.description-col input,
#windows_editor td.glazing-col select,
#windows_editor td.framing-col select,
#windows_editor td.area-col select {
    text-align: left !important;
}

/* Force left alignment for the first 4 column headers in #windows_editor */
#windows_editor thead th.description-col,
#windows_editor thead th.glazing-col,
#windows_editor thead th.framing-col,
#windows_editor thead th.area-col {
    text-align: left !important;
}

table.dataTable td.dt-select-checkbox {
    width: 30px !important;
    vertical-align: middle !important;
    text-align: center !important;
}

/* FixedColumns: preserve zebra striping on fixed columns */
table.table-striped tbody tr:nth-of-type(odd) td.dtfc-fixed-left {
    background-color: #f2f2f2 !important;
}

table.table-striped tbody tr:nth-of-type(even) td.dtfc-fixed-left {
    background-color: #f9f9f9 !important;
}

footer {
    text-align: right;
    position: absolute;
    bottom: 0;
    right: 10px;
    height: 60px;
}

.copy-btn {
    height: 33px !important;      /* Match DataTables default button height */
    padding: 6px 12px !important; /* Match DataTables default padding */
    font-size: 14px !important;
    line-height: 1.42857143 !important;
    border-radius: 4px !important;
    box-sizing: border-box;
}

div.dataTables_filter {
    text-align: right !important;
    float: right !important;
}

/* Only affect modals with your custom class */
div.windows-editor-modal .DTE_Body.modal-content {
    max-width: 1000px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

#copyErrorModal .modal-dialog,
#copyConfirmModal .modal-dialog,
#loginTimeoutModal .modal-dialog,
#copyFailureModal .modal-dialog {
    display: block !important;
    z-index: 10000 !important;

}

.dte-inline-label {
    font-size: 0.9em;
    color: #888;
    margin-top: 4px;
    margin-bottom: 2px;
    display: block;
    padding-left: 5px;
    padding-right: 5px;
    width: 100%;                /* Inherit width of parent/input */
    box-sizing: border-box;     /* Prevent overflow */
    word-break: break-word;     /* Allow wrapping */
    white-space: normal;        /* Allow wrapping */
    overflow-wrap: break-word;  /* Extra wrapping support */
    overflow: hidden;           /* Prevent overflow */
    max-width: 100%;            /* Never exceed cell width */
}

.DTE_Inline input,
.DTE_Inline textarea {
    margin-bottom: 8px !important; /* Add space below input for the label */
}

/* Focus styles for keyboard accessibility */
.btn:focus-visible,
a:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--color-primary-dark);
    outline-offset: 2px;
}

.nav .nav-item .nav-link:focus-visible {
    outline: 2px solid white;
    outline-offset: -2px;
}

/* Utility classes for navbar and sidebar inline styles */
.navbar-greeting {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 150px;
    text-align: left;
    font-weight: bold;
    color: white;
}

.navbar-welcome {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
    font-weight: bold;
    color: white;
}

.sidebar-header {
    padding-left: 30px;
    color: white;
}

.sidebar-header-display {
    padding-top: 10px;
    padding-left: 30px;
    color: white;
}

.sidebar-spacer {
    background-color: var(--color-primary);
    border-right: 2px solid grey;
}

.sidebar-toggler {
    width: 8%;
    padding-left: 50px;
}

.sidebar-icon {
    color: white;
}

.nav-active {
    color: black;
    background-color: var(--color-primary);
}

.nav-active-dark {
    color: black;
    background-color: var(--color-primary-dark);
    font-weight: bold;
}

.nav-inactive {
    color: white;
}

/* Print stylesheet */
@media print {
    .sidebar,
    .w-sidebar,
    .w-sidebar1,
    .top_nav,
    .container-fluid.fixed-top,
    #previous,
    #next,
    footer,
    .messages,
    #loader,
    #calc,
    #wait {
        display: none !important;
    }

    #content {
        padding-top: 0 !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
        overflow: visible !important;
        position: static !important;
    }

    body {
        overflow: visible !important;
        height: auto !important;
    }

    .content_wrapper {
        overflow: visible !important;
    }
}

/* ── Areas / Ground editor DataTables ── */

th.areas-num-col,
#areas_editor th.areas-num-col,
#areas_editor td.areas-num-col,
#ground_editor th.areas-num-col,
#ground_editor td.areas-num-col {
    text-align: right !important;
    min-width: 120px;
    width: 120px;
}

#areas_editor th.areas-desc-col,
#areas_editor td.areas-desc-col,
#ground_editor th.areas-desc-col,
#ground_editor td.areas-desc-col,
.dtfc-fixed-left th.areas-desc-col,
.dtfc-fixed-left td.areas-desc-col {
    text-align: left !important;
    min-width: 160px !important;
    width: 160px !important;
    white-space: normal;
}

#areas_editor td.areas-desc-col .DTE_Inline input,
#ground_editor td.areas-desc-col .DTE_Inline input {
    box-sizing: border-box;
    text-align: left !important;
}

#areas_editor th.areas-assembly-col,
#areas_editor td.areas-assembly-col,
#ground_editor th.areas-assembly-col,
#ground_editor td.areas-assembly-col {
    text-align: left !important;
    min-width: 160px !important;
    width: 160px !important;
    white-space: normal;
}

#areas_editor th.areas-check-col,
#areas_editor td.areas-check-col,
#ground_editor th.areas-check-col,
#ground_editor td.areas-check-col {
    text-align: center !important;
    min-width: 80px;
}



/* Consistent row group header styling */
table.dataTable tbody tr.dtrg-group th,
table.dataTable tbody tr.dtrg-group td {
    background-color: var(--color-primary) !important;
    color: #000 !important;
    box-shadow: none !important;
    font-weight: bold;
    font-size: 15px;
    text-align: left !important;
    padding-left: 35% !important;
}

/* Halve the width of inputs in the DataTables Editor modal/bubble form (not inline) */
.DTED_Lightbox_Wrapper .DTE_Field_Input input[type="text"],
.DTED_Lightbox_Wrapper .DTE_Field_Input input[type="number"],
.DTED_Lightbox_Wrapper .DTE_Field_Input select,
.DTED_Envelope_Wrapper .DTE_Field_Input input[type="text"],
.DTED_Envelope_Wrapper .DTE_Field_Input input[type="number"],
.DTED_Envelope_Wrapper .DTE_Field_Input select {
    max-width: 50% !important;
}

/* Hide the scrollbar on the header scroll container */
div.dt-scroll-head {
    overflow: hidden !important;
}