@font-face {
    font-family: "Segoe UI";
    src: url('/static/fonts/Segoe_UI.ttf');
}

address {
font-style: normal;
}

body {
    /* why the 80???, changed to 0 when designing support page */
    /* margin: 0 0 80px 0; */
    margin: 0 0 0 0;
    padding: 0;
    font-family: 'Segoe UI';
    line-height: 1.5;
    background-color: white;
}

*, ::after, ::before {
    box-sizing: border-box;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: #444444;
    margin-top: 0;
}

hr {
    margin-top: 1rem;
    margin-bottom: 1rem;
    border: 0;
    border-top: 1px solid rgba(0,0,0,.1);
}

p {
    margin: 0
}

button,
input,
optgroup,
select,
textarea {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    padding: 0 12px 0 12px;
}

table {
    border-collapse: separate;
    border-spacing: 0px;
    width: 100%;  /* for bid metrics table to fill parent div */
}

input:read-only {
    border: none;
}

input[type="checkbox"] {
    accent-color: #254e58;
}

input::-webkit-inner-spin-button,
input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}



/****** GENERAL ******/
#overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: none;
    z-index: 1000;
    animation: fadeIn 3s;
    background-color: #80808038;
    /* not used because overlay itself has nothing to click */
    /* pointer-events: none; */
}
@keyframes fadeIn {
    0% {opacity: 0;}
    100% {opacity: 1;}
}
#overlay #loader {
    position: relative;
    top: 30%;
    left: calc(50% - 40px);
    border: 15px solid #f3f3f3;
    border-top: 15px solid #a5cbd6;
    border-radius: 50%;
    width: 80px;
    height: 80px;
    /* margin: 30% auto auto auto; */
    animation: spin 2s linear infinite; 
    box-shadow: 0px 0px 20px 0px rgb(196, 196, 196);
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }   
}

.body {
    color: #333333;
    max-width: 1440px;
    margin: auto;
    margin-bottom: 100px;
    padding-left: 10px;
    padding-right: 10px;
    position: relative;
    /* top: 20px; */
}

.body-margin {
    /* this allows invisible scrolling behind this div when sticky hits it bottom */
    position: fixed;
    top: 60px;
    height: 20px;
    width: 100%;
    background-color: white;
    z-index: 1;
}

.pointer:hover {
    cursor: pointer;
}

.password-eye {
    position: absolute;
    width: 25px;
    right: 10px;
    top: 33px;
}



/****** INACTIVE ******/
.inactive {
    text-align: center;
    font-style: italic;
    width: 100%;
    background-color: #ff5959;
    color: white;
    font-weight: bold;
}



/****** NAVBAR ******/
.nav-div {
    position: sticky;
    width: 100%;
    top: 0px;
    z-index: 100;
    /* without bg col, scrolled text will show */
    background-color: white;
}
.bg-steel {
    background-color: #5f788a;
}

.navbar-strip {
    width: 100%;
    height: 60px;
    background-color: #112d32;
    border-top: 1px solid #88bdbc;
    z-index: 10;
}

.navbar {
    display: flex;
    margin: auto;
    max-width: 1440px;
    height: inherit;
    display: flex;
    justify-content: space-between;
}

.nav-left {
    display: flex;
    align-items: center;
}

.navbar-bcm {
    position: relative;
    margin-left: 20px;
    width: 250px;
}

.nav-right {
    display: flex;
    align-items: center;
}

.navbar-link {
    /* position needed for calc input */
    position: relative;
    color: #f5f5f5;
    text-decoration: none;
    padding: 17px 10px;
    height: 100%;
}

.navbar-link.active {
    background-color: #112d32;
    box-shadow: inset 0 -4px #f0bd7a;
}

.navbar-link:hover,
.logo-navbar-link:hover {
    color: #ffffff;
    background-color: #f0bd7a81;
    cursor: pointer;
}

.navbar-icon {
    height: 25px;
}

.menu-dropdown {
    position: relative;
}

.dropdown-content {
    display: none;
    position: absolute;
    right: 10px;
    top: 60px;
    background-color: #f1f1f1;
    min-width: 160px;
    box-shadow: 0px 8px 16px 8px rgba(0,0,0,0.2);
    z-index: 1;
    border-radius: 5px;
}

.dropdown-content-arrow {
    position: absolute;
    border-width: 10px;
    border-style: solid;
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: #f1f1f1;
    border-left-color: transparent;
    top: -17px;
    left: 85%;
    }

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {
    background-color: #ddd;
}

.calculator {
    position: absolute;
    display: none;
    top: 10px;
    right: 140%;
}

.calculator-error {
    display: none;
    position: absolute;
    top: 8px;
    right: 50px;
    color: red;
    font-style: italic;
}

.calculator input::placeholder {
    position: relative;
    top: -2px;
    font-size: .85rem;
    color: gray;
}

.calculator::after {
    content: " ";
    position: absolute;
    border-width: 20px;
    border-style: solid;
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-left-color: transparent;
    top: 0px;
    left: calc(100% - 3px);
    border-left-color: white;
}

.calculator-history {
    display: none;
    position: relative;
    font-style: italic;
    top: -23px;
    background-color: lightgrey;
    padding: 5px 16px;
    border-radius: 0 0 5px 5px;
    color: gray;
}

.calculator-history-caret img {
    width: 10px;
    height: auto;
    position: absolute;
    top: 12px;
    right: 30px;
    cursor: pointer;
}

.calculator-history-caret img:first-child {
    display: none
}

.clear-calculator-history {
    display: none;
    position: absolute;
    top: 6px;
    right: 4px;
    cursor: pointer;
}

.calculator-click-input {
    top: 37px;
    position: absolute;
    right: 0;
    width: 157px;
    background-color: #cbcbcb;
    padding: 10px;
    border-radius: 5px;
    margin-right: 0;
    border: 1px solid #a5cbd6;
}

.calculator-click-input button {
    width: 30px;
    height: 30px;
    font-size: small;
    margin: 2px auto;
    padding: 2px 0;
    border-radius: 5px;
    border: 1px solid #a5cbd6;
}

.calculator-click-input button:hover {
    background-color: #a5cbd6;
    cursor: pointer;
}

.calculator-click-input .backspace {
    background: url('/static/img/backspace.svg'); 
    background-repeat: no-repeat;
    background-size: 18px;
    background-position: center;
    background-color: #f0f0f0;
}



/****** HOME ******/
.index-div {
    position: relative;
    /* account for footer */
    margin-bottom: 25px;
}

.home-button {
    background-color: white;
    color: #4fa1a0;
    padding: 8px 12px;
    border-radius: 10px;
    font-weight: bold;
}

.demo-flex {
    display: flex;
    padding: 20px;
    justify-content: space-evenly;
    align-items: center;
    overflow: hidden;
}

.section-flex {
    min-height: 450px;
    max-width: 1440px;
    display: flex;
    padding: 20px;
    margin: 0 auto;
    justify-content: space-evenly;
    align-items: center;
    overflow: hidden;
}

.navbar-links {
    display: inherit;
    height: 100%;
}

.main-menu-btn {
    display: none;
    padding: 20px;
}

.trial-btn {
    padding: 20px;
}

.demo-flex div,
.section-flex div {
    flex-basis: 620px;
    flex-grow: 0;
}

.section-flex img {
    width: 620px;
    max-height: 325px;
}

.section-flex h1 {
    font-size: 2rem;
    text-align: center;
    margin: 0;
}

.alt-color, .alt-color h1 {
    background-color: #4fa1a0;
    color: white;
}

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

.alt-color-text {
    color: #4fa1a0;
    font-weight: bold;
}

.btm-section {
    height: 100px;
}
.btm-section ul {
    list-style-type: none;
    padding: 0;
}
.btm-section a {
    color: white;
    text-decoration: none;
    line-height: 2;
}
.btm-section a:hover {
    text-decoration: underline;
}
.btm-section img {
    height: 150px;
    width: auto;
}

.section-div {
    margin: 0 auto;
    padding: 40px 20px;
    text-align: justify;
    max-width: 720px;
}

.section-div-flex {
    display: flex;
    max-width: 1440px;
    justify-content: center;
    gap: 40px;
    margin: 0 auto;
}

.section-div h2 {
    color: white;
    text-align: center;
    margin: 0;
}

.section-div .list {
    display: table;
    margin-left: auto;
    margin-right: auto;
}

.about-flex {
    display: flex;
    gap: 25px;
}

.about-flex img {
    width: 250px;
}

.main-content {
    margin-left: auto;
    margin-right: auto;
    padding-top: 10px;
    max-width: 720px;
    text-align: justify;
    padding-bottom: 10px;
}

.main-content-form {
    max-width: 424px;
}

.main-content h2 {
    text-align: center;
}

@media (max-width: 960px) {
    .navbar-bcm {
        display: none;
    }
    .main-menu-btn {
        display: block;
    }
    .navbar-links {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 60px;
        left: 0;
        width: 100%;
        text-align: center;
        background-color: gray;
        height: auto;
    }
    .navbar-link {
        padding: 20px;
    }
    .section-flex,
    .demo-flex {
        display: inherit;
        height: auto;
    }
    .section-flex img,
    .demo-flex img {
        width: 85%;
    }
    .opening {
        height: auto;
    }
    .opening span {
        line-height: normal;
    }
    .demo-flex {
        position: inherit;
    }
    .demo-flex .demo {
        margin-top: 20px;
        text-align: center;
    }
    .about-flex {
        flex-direction: column;
        align-items: center;
    }
}

/* this needs to be below the above, the higher number (order) of the same property will used */
.nav-menu-active {
    display: flex;
}



/****** PLANS ******/
.plans-register-link {
    text-align: center;
}



/****** SERVICE ******/
.service-icon {
    display: block;
    width: 250px;
    margin: 35px auto;
}



/****** USERS ******/
.user-table input:not(.user-table-email, .user-table-email-error) {
    text-align: center;
}

.user-table-email, .user-table-email-error {
    width: 85%;
    text-align: start;
}

.user-table-email-error {
    border: 3px solid rgb(252, 163, 163);
}

.user-table-email-error:focus {
    outline: 1px solid red;
}

.user-table input {
    border-radius: 5px;
}

.user-add-edit {
    padding: 0 0 0 5px;
}



/****** FORMS ******/
.disabled {
    pointer-events: none;
    border: none;
    appearance: none;  /* remove arrow */
}

fieldset {
    border: none;
}

.form-legend {
    border-bottom: 1px solid rgb(226, 226, 226);
    margin-bottom: 20px;
    font-size: 1.5rem;
    width: 100%;
}

.form-label {
    margin-bottom: 2px;
    font-size: medium;
}

.form-field, .form-label {
    display: block;
}

.form-field,
.form-field-error,
.form-field-tracking,
.graph-table-form-field,
.filter-last-month,
.text-area {
    font-size: 1.15rem;
    color: rgb(105, 105, 105);
    border: solid 1px rgb(226, 226, 226);
    border-radius: 5px;
    justify-content: center;
    width: 400px;
    height: 40px;
    margin-bottom: 20px;
    align-items: center;
}

.form-field-tracking {
    width: 200px;
    height: auto;
    float: left;
    align-items: flex-start;
    font-size: 1rem;
    word-wrap: normal;
}

.form-field:focus,
.graph-table-form-field:focus,
.main-content textarea:focus,
.searchbox input:focus,
.user-table-email:focus {
    border: 1px solid rgb(195, 220, 228);
    outline: none;
    box-shadow: 0 0 5px rgb(163, 184, 190);
}

.form-field-error {
    margin-bottom: auto;
    border: 3px solid rgb(252, 163, 163);
}

.form-field-error:focus {
    outline: red;
}

input:disabled {
    background: inherit;
    border: none;
    margin: 0;
    height: auto;
    color: inherit
}

/* submit buttons are disabled until checkValidity() */
/* is-submitting added on submit() event */
#inactive-disabled,
.submit-btn:disabled,
.button-delete:disabled,
.is-submitting input,
.is-submitting select,
.is-submitting textarea,
.is-submitting .submit-btn, /* descendant */
.is-submitting .button-cancel,
.is-submitting .disable {
    pointer-events: none;
    background-color: rgb(240, 240, 240);
    color: gray;
    accent-color: rgb(240, 240, 240); /* for filter boxes on metrics page*/
}

.form-label-error {
    color: rgb(252, 64, 64);
    /* TODO: check this property */
    offset-position: -20px;
    margin-bottom: 20px;
    display: block;
}

.form-flex {
    display: flex;
    flex-direction: column;
}

.form-flex-tracking {
    display: flex;
    justify-content: space-around;
}

.form-flex-tracking-group,
.form-flex-login {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    float: left;
}

.form-input {
    width: 15rem;
    margin-left: 0;
    margin-bottom: 2rem;
}

.form-label-tracking {
    font-size: 1.2rem;
    font-weight: 500;
    width: 200px;
    border-bottom: 1px solid gray !important;  
}

.tracking-delete,
.user-delete {
    visibility: hidden;
    position: relative;
    right: 20px;
    cursor: pointer;
    width: 10px;

}

.tracking-delete img,
.user-delete img {
    width: 12px;
}

.add-cat-value {
    display: none;
}

.add-cat-value img {
    height: 1rem;
    width: auto;
}

.add-cat-value img:hover {
    cursor: pointer;
}

.tracking-delete button,
.tracking button, 
.users-edit,
.users-add {
    background: none;
    border: none;
    cursor: pointer;
}

.text-area {
    height: 20rem;
    min-height: 5rem;
    resize: vertical;
}

.fieldset1 {
    float: left;
    width: 50%;
    margin: 0;
    box-sizing: border-box;    
}

.fieldset2 {
    float: 'left';
    width: 50%;
    margin: 10px;
    box-sizing: border-box;    
}



/****** BUTTONS ******/
/* TODO: .button is listed twice */
.button {
    width: auto;
    border: none;
    text-decoration: none;
}

.button-link {
    max-width: 120px;
    background: none;
    border: none;
    color: #4fa1a0;
    cursor: pointer;
    font-size: inherit;
    overflow-x: hidden;
    text-overflow: ellipsis;
}

.button-link-override {
    color: inherit;
}

.hidden-submit {
    display: none;
}

.button-link:hover {
    text-decoration: underline;
    color: #254e58;
}

.flex-project-buttons,
.button,
.button-small,
.button-delete,
.button-cancel,
.button-cancel-small,
.button-home,
.button-home-alt-color {
    width: 160px;
    padding: 8px;
    border-radius: 5px;
    background-color: #254e58;
    color:  white;
    text-align: center;
    display: inline-block;
    font-size: inherit;
}

.button-small,
.button-cancel-small {
    width: 75px;
    line-height: revert;
    border: none;
}

.button-home {
    background-color: white;
    color: #444444;
    text-decoration: none;
}

.button-home-alt-color {
    background-color: #5ca19f;
    color: white;
    text-decoration: none;
}

.flex-tab-div a {
    text-decoration: none;
}

.flex-tab-div .flex-project-buttons {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    margin-top: 5px;
}

.button-delete {
    width: auto;
    border: none;
    background-color: rgb(197, 0, 0);
}

.button-delete:hover {
    background-color: rgba(255, 0, 0, 0.6);
    cursor: pointer;
}

.button-cancel,
.button-cancel-small {
    visibility: hidden;
    width: auto;
    border: none;
    background-color: rgb(122, 122, 122);
    text-decoration: none;
}

/* by default, not visible until an edit has occurred */
/* in this case, the edit is selecting the checkbox */
.button-cancel-small.edit-ext {
    visibility: visible;
}

.button-cancel:hover,
.button-cancel-small:hover {
    background-color: rgb(172, 172, 172);
    cursor: pointer;
}

.flex-project-buttons:hover,
.button:hover,
.button-small:hover,
.button-home:hover,
.button-home-alt-color:hover {
    background-color: #9FCBD7;
    color: #474747;
    cursor: pointer;
}

.flex-project-buttons:active {
    transform: translateY(2px);
}

.flex-project-select-div {
    width: 15%;
    display: flex;
    align-items: center;
    justify-content: end;
}

.flex-project-select {
    border-radius: 5px;
    border: 1px solid lightgray;
    vertical-align: center;
    height: 35px;
    width: 100%;
}



/****** SUMMARY TABLE ******/
.summary-table {
    table-layout: fixed;
}

.summary-table colgroup col:first-child {
    width: 80px;
}
.summary-table colgroup col:nth-child(2) {
    width: 120px;
}
.summary-table colgroup col:nth-child(3) {
    width: 200px;
}

.summary-table thead th {
    position: sticky;
    background-color: #f0bd7a;
    color: #474747;
    padding: 5px;
    border-bottom: 5px solid #474747;
    text-align: center;
    top: 0;
    vertical-align: top;
    z-index: 9;
    width: 200px;
    height: 70px;
}

/*class does not work, using id due to specificity of .summary-table thead th override*/
#summary-metrics-header {
    left: 0;
    z-index: 10;
} 

.summary-table tbody th {
    color: #656565;
}

.summary-table tbody tr td {
    padding: 10px;
}

.summary-info {
    background-color:  rgba(206, 206, 206, .5);
}

.summary-info .first-col-sticky {
    background-color:  rgb(206, 206, 206);
}

.summary-device {
    background-color: rgba(229, 242, 245, .5);
}

.summary-device .first-col-sticky,
.summary-device .second-col-sticky,
.summary-device .third-col-sticky {
    background-color: rgba(229, 242, 245, 1);
}

.summary-lf {
    background-color: rgba(250, 248, 244, .5);
}

.summary-lf .first-col-sticky,
.summary-lf .second-col-sticky,
.summary-lf .third-col-sticky {
    background-color: rgba(250, 248, 244, 1);
}

.summary-sqft {
    background-color: rgba(229, 242, 245, .5);
}

.summary-sqft .first-col-sticky,
.summary-sqft .third-col-sticky {
    background-color: rgba(229, 242, 245, 1);
}

.summary-unit {
    background-color: rgba(250, 248, 244, .5);
}

.summary-unit .first-col-sticky,
.summary-unit .third-col-sticky {
    background-color: rgba(250, 248, 244, 1);
}

.summary-tot {
    background-color: hsl(307, 100%, 98%);
}

.summary-tot .first-col-sticky,
.summary-tot .third-col-sticky {
    background-color: hsl(307, 100%, 94%);
}

.summary-table-div {
    overflow-x: scroll;
    border: 2px solid lightgrey;
    height: calc(100vh - 245px);
    }

.summary-table tr:hover {
    background-color: rgb(240, 238, 238);
}

.summary-table td {
    text-align: center;
    border-bottom: 1px solid rgb(240, 240, 240);
}

.first-col-sticky,
.second-col-sticky,
.third-col-sticky {
    position: sticky;
    left: 0;
    padding: 4px 12px;
    vertical-align: middle !important;
    text-align: center;
}

.first-col-sticky {
    left: 0;
    z-index: 1;
}

.second-col-sticky {
    left: 80px;
}

.third-col-sticky {
    left: 200px;
}

/* summary table boarders */
.first-col-sticky,
.second-col-sticky,
.third-col-sticky {
    border-right: 2px solid rgb(218, 218, 218);
}

.summary-border-top {
    border-top: 2px solid rgb(218, 218, 218);
}

.summary-info,
.summary-device,
.summary-lf,
.summary-sqft,
.summary-unit, 
.summary-tot,
.summary-section {
    border-top: solid 2px #474747;
}



/****** GRAPH ******/
.graph-list-header {
    text-decoration: underline;
    margin: 0
}

.graph-list-projects {
    white-space: nowrap;
    list-style-type: none;
    font-size: small;
    margin-top: 5px
}

.graph-list-projects li {
    position: relative;
    left: -25px;
}

.graph-list-projects button {
    background: none;
    border: none;
    padding: 0;
    margin-left: 5px;
}

.graph-list-projects button:hover {
    text-decoration: underline;
    cursor: pointer;
}

.graph-list-projects .excluded-systems {
    color: blue;
}

.graph-list-div .unselected {
    color: #757575;
}

.graph-list-label {
    text-decoration: underline;
    font-size: 1rem;
}

.graph-list-div {
    /* fixme: sticky does not work if parent height is smaller, ie bid metrics */
    position: sticky;
    top: 120px;
    border: 1px solid lightgray;
    border-radius: 5px;
    padding: 10px 10px 30px 10px;
    width: 20%;
    height: 100%;
    overflow: auto;
}

.graph-list-div .submit-btn {
    max-width: 100px;
    max-height: 30px;
    padding: 0;
    visibility: hidden;
}

.metric-rs-dev {
    width: 15%;
}

.filter-options-filter {
    padding-left: 10px;
    padding-right: 10px;
}

.tom-border {
    border-left: 1px solid lightgray;
    border-right: 1px solid lightgray;
}

.graph-table-div {
    border: 1px solid lightgray;
    border-radius: 5px;
}

.data-div {
    width: 80%;
    margin-right: 30px;
}

.graph-table-header {
    text-decoration: underline;
    margin-bottom: -8px;
    font-size: 1rem;
}

.graph-table-form-field {
    width: 25px;
    height: 20px;
    margin-bottom: auto;
    padding-left: 0;
    padding-right: 0;
    text-align: center;
    font-size: .95rem;
}



/****** PROJECT ******/
.flex-tab-bar {
    position: sticky;
    top: 60px;
    padding-top: 10px;
    display: flex;
    justify-content: space-between;
    border-bottom: 5px solid #9FCBD7;
    background-color: white;
    z-index: 1;
}

.flex-tab-div {
    width: 85%;
}
@media (max-width: 1385px) {
    .flex-tab-div a {
        margin-top: 2px;
    }
}

.flex-tabs {
    background-color: #7e7e7e;
}

.project-body {
    position: relative;
    margin-top: 20px;
}

.flex-create-project {
    top: 60px;
    display: flex;
    position: sticky;
    height: 65px;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 10px;
    padding-top: 10px;
    background-color: white;
}

.flex-container {
    display: flex;
}

.flex-container-form {
    display: flex;
    justify-content: space-between;
}

.flex-container-form-proj-det {
    display: flex;
    justify-content: left;
    gap: 100px;
}

.half-form-field input{
    width: 150px;
}

.flex-container-filters {
    display: flex;
}

.filter-last-month {
    width: 36px;
    justify-items: center;
}

.ext-comp-method {
    width: 100px;
}

.filter-values {
    font-size: .9rem;
}

/* not used yet */
.filter-checkbox {
    width: 20px;
}

.flex-container-space-between {
    justify-content: space-between;
}

.new-project-header {
    margin-left: 10px;
    font-weight: bold;
    color: rgb(88, 87, 87);
    margin-top: -2px;

}



/****** PROJECT DETAILS ******/
.unit-comp-head {
    text-decoration: underline;
    font-weight: 600;
    margin-top: 9%;
    font-size: 1rem;
    margin-bottom: 10px;
    margin-top: 28px;
}

.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 2; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.modal-content {
    border-radius: 5px;
    background-color: #fefefe;;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 40px;
    border: 1px solid #888;
    width: -moz-fit-content;
    width: fit-content;
    text-align: center;
}

.modal-buttons {
    margin-top: 3rem;
    display: inline-flex;
    gap: 5px;
}

.exclude {
    font-size: 1rem;
}

.exclude-true {
    color: red;
}

.exclude-partly {
    color: blue;
}

.legend-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.final-pricing-collapsible {
    vertical-align: middle;
    width: 40px;
    height: auto;
    background-color: rgba(119, 119, 119, 0);
    opacity: 50%;
    color: white;
    border: none;
}

.final-pricing-collapsible:hover {
    cursor: pointer;
}

.final-pricing-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}

.system-list {
    text-align: left;
    margin-left: 40px;
}


/****** VIDEOS ******/
.modal-video {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 50%;
    height: auto;
    position: fixed;
    left: 50%;
    top:40%;
    transform: translate(-50%, -50%);
}
@media (max-width: 960px) {
    .modal-video {
        width: 80%;
    }
}
.modal-video:hover .vid-btn-tray {
    visibility: visible;
}

.modal-video video {
    width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 0 20px 0 rgb(0, 0, 0);
}

.vid-btn-tray {
    visibility: hidden;
}

.vid-btn {
    width: 30px;
    height: 30px;
    padding: 0;
    margin: 10px;
}
.vid-btn:hover {
    filter: contrast(50%);
}

/****** CONFIGURATION ******/
.radio-opts {
    display: flex;
    gap: 30px;
}

#formConfig textarea {
    height: 129px;
}



/****** DB SETUP ******/
.db-data-option {
    margin-bottom: 10px;
}

.db-paste-clipboard {
    display: none;
    margin-left: 12px;
}

.db-paste-textarea {
    overflow-x: scroll;
    white-space: nowrap;
    margin-top: 10px;
    border-color: lightgray;
    border-radius: 4px;
}



/****** PROJECT TRACKING ******/
.edit-categories {
    display: none;
    font-style: italic;
    color: red;
    font-size: 1rem;
}



/****** IMAGES ******/
.logo-navbar {
    height: 45px;
    padding: 4px;
    background-color: darkslategray;
    border: 1px solid whitesmoke;
    border-radius: 5px;
    position: relative;
    top: -10px;
}

.video-thumbnail {
    max-width: 250px;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 0 20px 0 rgb(0, 0, 0);
    margin: 0 10px
}

.video-thumbnail:hover {
    cursor: pointer;
}

.create-project-icon {
    height: 20px;
    padding: 0;
    vertical-align: middle;
}

.clear-filter {
    display: none;
    position: absolute;
    top: 6px;
    right: 4px;
}

.clear-filter-icon {
    position: relative;
    margin-right: 4px;
    width: 15px;
    height: 15px;
}

.clear-filter-icon:hover {
    cursor: pointer;
}

.info-icon {
    width: 18px;
    height: 18px;
}

.info-icon-proj {
    width: 18px;
    height: 18px;
    filter: invert();
}

.download-icon {
    height: 25px;
    align-items: center;
    padding: 0;
}

.question-mark {
    height: 25px;
    align-items: center;
    padding: 0;
}



/****** EXTENSION ******/
.upload-edit-flex {
    display: flex;
    justify-content: space-between;
    gap: 5px;
}

/* hack to get customize upload button and still have filename */
.file-upload {
    display: none;
}

.extension-table-div {
    margin: 0;
}

/* edit gets added to extension-table with js when edit extension is enabled */
.edit tr:hover {
    background-color: rgba(255, 144, 144, 0.6);
}

.edit input, .extension-mod-notice, .extension-mismatch-notice {
    font-style: italic;
    color: red;
    width: 100%;
    text-align: center;
}

.extension-mismatch-notice {
    color: rgb(177, 160, 2);
}

.edit-buttons {
    width: 20px;
    height: 20px;
    position: relative;
    float: right;
}

.edited-cells {
    color: red;
    font-style: italic;
    font-weight: bold;
    background: lightpink;
}

.extension-header {
    display: flex;
    justify-content: space-between;
}

.extension-table,
.projects-table,
.user-table {
    width: 100%;
}

.extension-table th,
.projects-table th,
.user-table th,
.graph-table thead tr th {
    position: sticky;
    background-color: #f0bd7a;
    color: #474747;
    padding: 5px;
    border: 1px solid #d6a15c;
    border-bottom: 5px solid #474747;
    text-align: center;
    font-weight: bold;
    vertical-align: top;
    z-index: 1;
}

/* overwrite <th> styles */
.sub-header {
    font-weight: normal
}

.user-table th {
    top: 120px;
}

.projects-table th {
    top: 125px;
}

.extension-table th {
    top: 120px;
}

@media (max-width: 1385px) {
    .extension-table th,
    .graph-table thead tr th,
    .graph-list-div {
        top: 165px;
    }
}

.extension-table th,
.extension-table select {
    max-width: 300px;
}

.extension-table th:hover,
.projects-table th:hover,
.summary-table thead th:not(:first-child):hover {
    background-color: #ffcd8c;
    cursor: pointer;
}

.extension-table td,
.projects-table td,
.user-table td,
.graph-table td {
    border-bottom: 1px solid rgb(226, 226, 226);
    text-align: center;
}

.extension-flex-container {
    display: flex;
    justify-content: space-between;
}

.extension-filters {
    text-align: center;
}

.extension-clear-filter {
    padding-bottom: 10px;
}

.extension-desig-row {
    background-color: rgba(255, 230, 0, .1);
    font-style: italic;
}

.extension-desig {
    background-color: rgb(255, 230, 0, .2);
}

.dev-count {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    font-size: small;
}

.ext-qty {
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    font-size: small;
    font-weight: normal;
}

.upload-info {
    max-width: 500px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.upload-info:hover {
    overflow: visible;
}



/****** DASHBOARD ******/
.recent-projects {
    display: flex;
    width: 200px;
    vertical-align: middle;
}

.metric-toggle {
    width: auto;
}

#projectTable .project-number,
#projectTable .left-align {
    text-align: left;
}

.projects-table select,
.extension-table select {
    background-color: #ffcd8c;
    color: #474747;
    border-radius: 4px;
    border-color: #d6a15c;
    padding: 2px;
    text-align: center;
    /* without this, the expand table gets th and td out alignment */
    width: 100%;
    font-size: .85rem;
}

.projects-table select,
.extension-table select {
    font-style: italic;
    font-weight: bold;
}

.projects-table select:valid,
.extension-table option {
    font-style: normal;
}

.projects-table td {
    max-width: 125px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 6px;
}

.projects-table select {
    max-width: 50px;
}

.searchbox {
    display: inline-block;
    position: relative;
}

.searchbox input {
    border: 1px solid lightgray;
    border-radius: 5px;
    height: 35px;
}



/****** EXPAND ******/
.expand-head {
    display: flex;
    justify-content: space-between;
    align-content: center;
    background-color: white;
    top: 60px;
    padding: 20px 0;
    position: sticky;
    font-weight: bold;
    height: 65px;
}

.current-project {
    background-color: #8fbdbb33;
}



/****** METRICS ******/
.graph-table {
    table-layout: fixed;
}

.graph-table thead {
    position: sticky;
    top: 120px;
}

.graph-table tbody th {
    background-color: #f5f2ee;
    border-right: 1px solid #e2e2e2;
    color: #656565;
}

.graph-table-bb {
    border-bottom: 1px solid #e2e2e2;
}

@media (min-width:1420px ) {
    .graph-table col:first-child {
        width: 300px;
    }
    .graph-table col:nth-child(2) {
        width: 70px;
    }
    .graph-table col:nth-child(3) {
        width: 170px;
    }
    .system-desc-th {
        padding: 0 60px;
    }
}
    
.dev-qty-th {
    width: 70px;
}

.graph-table .per-metric {
    background-color: #fdf9f4;
    padding: 6px;
}

.system-row-bb,
.system-row-bb th,
.system-row-bb td {
    border-bottom: 3px solid #d3d2d2;
}

.system-desc-th:hover {
    background-color: #ffefd9;
}

.graph-table td {
    height: 40px;
}

.qty-devices-adj {
    font-size: .75rem;
}

.qty-devices-adj input {
    max-width: 60px;
    padding: 0;
    text-align: center;
    border: 1px solid rgb(226, 226, 226);
    border-radius: 4px;
}

.variance-pct-bar {
    position: absolute;
    left: 0;  /* gets set to 1 without this */
    width: 100%;
}

.variance-chart {
    height: 200px;
    position: relative;
    /* js style goes above base style, need to put behind */
    z-index: -1;
}

.warning-threshold, .danger-threshold, .normal-threshold {
    border-left: 1px solid #ffffff
}

.warning-threshold {
    background-color: rgba(255, 255, 196, .75);
}

.danger-threshold {
    background-color: rgba(255, 193, 179, 0.25);
}

.normal-threshold {
    background-color: rgba(180, 255, 164, .4);
}

.blank-row-metrics {
    height: 10px;
    background-color: floralwhite;
}

.metric-display-options {
    font-size: .8rem;
    font-weight: normal;
    text-align: left;
    margin-top: 6px;
}

.metric-display-options span {
    font-size: 1rem;
    font-weight: bold;
    font-family: monospace;
    cursor: pointer;
    caret-color: transparent;
}

.metric-display-options div {
    display: none;
}



/****** Bid ******/
.bid-table {
    min-width: 108px;
}



/****** FINAL METRICS ******/
.final-pricing {
    justify-content: space-around;
    margin-left: 10%;
    margin-right: 10%;
}

/* show tooltip over header */
.final-table thead tr th {
    position: static;
}

@media (max-width: 1385px) {
    .final-table thead tr th {
        top: 165px;
        /* undo position change for tooltip, this is quick fix, tooltip wont look right at this size */
        position: sticky;
    }
}

.final-table td {
    width: 200px;
}

.final-pricing .graph-table-div {
    margin-bottom: 0;
}

.final {
    overflow: inherit;
}

.border-btm {
    border-bottom: 5px solid #474747 !important
}



/****** FLASH MESSAGES ******/
.flash-container {
    transform: translateY(calc(-100% + 8px));
    position: fixed;
    z-index: 101;
    max-width: 960px;
    left: 0;
    right: 0;
    margin: 0 auto;
    transition: transform .75s ease-in-out;
}
.flash-container:hover {
    transform: translateY(8px) !important;
}

.flash-msg {
    box-shadow: 1px 1px 10px gray, -1px 1px 10px grey;
    border-radius: 10px;
    overflow: hidden;
}

.flash-success,
.flash-warning,
.flash-error,
.flash-cancel {
    padding: 15px;
    text-align: center;
    font-size: .9rem;
    font-weight: bold;
}
.flash-success:empty,
.flash-warning:empty,
.flash-error:empty,
.flash-cancel:empty {
    padding: 0;
}

.flash-success {
    background-color: rgb(206, 255, 208);
    color: rgb(13, 116, 13);
}

.flash-warning {
    background-color: rgb(246, 255, 208);
    color: rgb(114, 116, 13);
}

.flash-error {
    background-color: rgb(255, 208, 208);
    color: rgb(99, 17, 17);
}

.flash-cancel {
    background-color: rgb(200, 200, 200);
    color: rgb(94, 94, 94);
}

.flash-close {
    display: none;
    position: absolute;
    top: 10px;
    right: 10px;
    font-weight: bold;
    font-size: .7rem;
    color: inherit;
    background-color: inherit;
    border: solid 1px #3c3c3c;
    border-radius: 3px;
    padding: 0 4px 0px 4px;
}

.flash-close:hover {
    cursor: pointer;
}



/****** TOOLTIPS ******/
/* tooltip div */
.tooltip {
    position: relative;
    display: inline-block;
    opacity: 100%;
    z-index: auto;
}

/* tooltip text settings */
.tooltiptext {
    visibility: hidden;
    width: 300px;
    background-color: #7e7e7e;
    font-weight: normal;
    font-size: .9rem;
    color: #fff;
    text-align: justify;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid whitesmoke;
    position: absolute;
    box-shadow: 0px 5px 15px -5px #3f3f3f;
    z-index: 2;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}

/* tooltip arrow settings */
.tooltip .tooltiptext::after {
    content: " ";
    position: absolute;
    border-width: 10px;
    border-style: solid;
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-left-color: transparent;
}

/* tooltip independent settings */
.tooltiptext.position-to {
    top: -15px;
    left: 100%;
    margin-left: 10px;
    width: 600px;
    text-align: start;
}

.tooltiptext.arrow-to::after {
    top: 23px;
    right: 100%;
    border-right-color: #7a7a7a;
}

.tooltiptext.position-ct {
    top: -15px;
    left: 100%;
    margin-left: 10px;
    width: 600px;
    text-align: start;
}

.tooltiptext.arrow-ct::after {
    top: 23px;
    right: 100%;
    border-right-color: #7a7a7a;
}

.tooltiptext.position-loc {
    top: -15px;
    left: 100%;
    margin-left: 10px;
    width: 350px;
    text-align: start;
}

.tooltiptext.arrow-loc::after {
    top: 23px;
    right: 100%;
    border-right-color: #7a7a7a;
}

.tooltiptext.position-desig {
    top: 40px;
    right: -95%;
    margin-left: 10px;
    width: 350px;
    text-align: start;
}

.tooltiptext.arrow-desig::after {
    top: -20px;
    left: 90%;
    border-bottom-color: #7a7a7a;
}

.tooltiptext.position-config {
    top: -15px;
    left: 100%;
    margin-left: 10px;
    width: 600px;
    text-align: start;
}

.tooltiptext.arrow-config::after {
    top: 14px;
    right: 100%;
    border-right-color: #7a7a7a;
}

.tooltiptext.position-db-setup {
    bottom: -15px;
    left: 100%;
    margin-left: 10px;
    width: 600px;
    text-align: start;
}

.tooltiptext.arrow-db-setup::after {
    bottom: 20px;
    right: 100%;
    border-right-color: #7a7a7a;
}

.tooltiptext.position-dashboard {
    top: -15px;
    right: 100%;
    margin-right: 10px;
}

.tooltiptext.arrow-dashboard::after {
    top: 12px;
    left: 100%;
    border-left-color: #7a7a7a;
}

.tooltiptext.position-edit-details {
    top: 40px;
    left: 100%;
    margin-left: -40px;
    text-align: start;
    width: 400px;
}

.tooltiptext.arrow-edit-details::after {
    top: -20px;
    right: 90%;
    border-bottom-color: #7a7a7a;
}

.tooltiptext.position-extension {
    top: -15px;
    right: 100%;
    margin-right: 10px;
}

.tooltiptext.arrow-extension::after {
    top: 14px;
    left: 100%;
    border-left-color: #7a7a7a;
}

.tooltiptext.position-ext-warnings {
    top: -15px;
    left: 100%;
    margin-left: 10px;
    width: 600px;
}

.tooltiptext.arrow-extension-ext::after {
    top: 14px;
    right: 100%;
    border-right-color: #7a7a7a;
}

.tooltiptext.position-filters {
    top: -15px;
    left: 100%;
    margin-left: 10px;
}

.tooltiptext.arrow-filters::after {
    top: 14px;
    right: 100%;
    border-right-color: #7a7a7a;
}

.tooltiptext.position-date {
    top: -15px;
    left: 100%;
    margin-left: 10px;
}

.tooltiptext.arrow-date::after {
    top: 14px;
    right: 100%;
    border-right-color: #7a7a7a;
}

.tooltiptext.position-tom {
    top: -15px;
    right: 100%;
    margin-right: 10px;
}

.tooltiptext.arrow-tom::after {
    top: 14px;
    left: 100%;
    border-left-color: #7a7a7a;
}

.tooltiptext.position-threshold {
    top: -15px;
    right: 100%;
    margin-right: 10px;
}

.tooltiptext.arrow-threshold::after {
    top: 14px;
    left: 100%;
    border-left-color: #7a7a7a;
}

.tooltiptext.position-proj-unit {
    top: -15px;
    right: 100%;
    margin-right: 10px;
    display: block;
}

.tooltiptext.arrow-proj-unit::after {
    top: 14px;
    left: 100%;
    border-left-color: #7a7a7a;
}

.tooltiptext.position-proj-final {
    top: -5px;
    left: 30px;
}

.tooltiptext.arrow-proj-final::after {
    top: 4px;
    left: -20px;
    border-right-color: #7a7a7a;
}

/* this pulls out of overflow div */
.tooltip.proj-unit {
    position: fixed;
    z-index: 1;
}

.tooltip-icon-var-adj {
    margin-left: -12%;
}

.tooltiptext.position-summary {
    top: 30px;
    left: -172px;
}

.tooltiptext.arrow-summary::after {
    top: -20px;
    left: 170px;
    border-bottom-color: #7a7a7a;
}


/****** PAYMENTS ******/
.hidden {
    display: none;
}

.subscription-complete {
    text-align: center;   
}



/****** PRIVACY TERMS ******/
.ptc {
    max-width: 800px;
    margin-right: auto;
    margin-left: auto;
    text-align: justify;
}

.ptc p {
margin-bottom: 10px;
}



/****** FOOTER ******/
footer {
    font-size: .75rem;
    min-height: 25px;
    width: 100%;
    position: fixed;
    display: flex;
    justify-content: space-between;
    align-items: center;
    bottom: 0;
    color: #636363;
    background-color: rgb(245, 245, 245);
}
footer span {
    margin-left: 20px;
}
footer a {
    margin-right: 20px;
    text-decoration: none;
    color: #3e62b3;
}
footer a:hover {
    text-decoration: underline;
}



/****** MISC ******/
.border-top {
    border-top: 1px solid rgb(226, 226, 226);
    padding-top: 20px;
}

.pre-wrap {
    /* 
    this will allow leading spaces and extra spaces to show in tables 
    " || System" or "1/2      Conduit - EMT"
    need this in case user copies data and runs formulas that need to match
    */
    white-space: pre-wrap;
}

.pointer {
    cursor: pointer;
}

.current-page {
    background-color: #9FCBD7;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    color: rgb(71, 71, 71);
    font-weight: 600;
}

@media print {
    .body {zoom: 70%; max-width: 100%}
    table {page-break-after: auto; -webkit-print-color-adjust: exact}
    table tr {page-break-inside: avoid; page-break-after: auto}
    table td {page-break-inside: avoid; page-break-after: auto}
    table thead {display: table-header-group}
    table tfoot {display: table-footer-group}
    .flash-warning, .flash-error, .flash-cancel {display: none;}
    .navbar-link:hover {background-color: inherit;}
    .summary-table-div {overflow: visible;}
}