/* Move down content because we have a fixed navbar that is 50px tall */
:root {
    --LabelOffset: 110px;
    --LabelInset: -110px;
    --LabelLeft: 120px;
    --SubsWidth: 400px;
}

#content0 {
    display: none;
}

.wideTable {
    display: flex;
}

.RowHeader {
    font-weight: 600;
}

.fillTable td, .fillTable th {
    padding: .15em .5em;
}

.fillTable td {
    text-align: right;
}

.fillTable th {
    text-align: center;
    background-color: gainsboro;
}

.grandtotal {
    background-color: darkseagreen;
}

.subtotal {
    background-color: aliceblue;
}
.TruckPick{
    z-index:3000;
    position:relative;
    top:150px;
}
.hoverattop {
   position:sticky;
   top:0px;
   background-color:white;
   width:100%;
    z-index: 19999;
}
.gvCheck {
    max-width:15px;
}
.gvDesc {
    min-width: 344px;
    max-width:90vw;
}
.gvNote textarea {
    padding:2px;
    width:100%;
    height:auto;
    
}
.qcrHeader {
    position: sticky;
    top: 1em;
    background-color: white;
    width: 100%;
    z-index: 1040;
}
.qcrHeaderSub {
    position: sticky;
    top: 4.5em;
    background-color: white;
    width: 100%;
    z-index: 1040;
}
.qcrEstNoteHeader {
   
}
.qcReporttable
{
    width:100vw;

}
.qcrItems {
 width:90vw;
}
.QCReportdata{
    display:block;
}
.qclistcol1
{
    min-width:344px;
}
.gvChecks {
    max-width:calc(100vw - 20px);
}
.qclistdetails {
    background-color: lightgray;
    margin: 0 10px;
    min-width: 150px;
    border: 1px solid gray;
}
.qcPhase1 {
    min-width: 150px;
    padding-left:10px;
}
.qcPhase2{
    min-width:342px;

}
.qcPhaseTable .row
{
    padding-top:7px;
    
}
/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content, .body-content2 {
    overflow-y: auto;
    position: absolute;
    top: 65px;
    height: calc(100vh - 85px);
    left: 0px;
    width: 100vw;
}


/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

/* Set widths on the form inputs since otherwise they're 100% wide */
input[type="text"]:not(.POGL2 *,.not100),
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="select"] {
    max-width: 280px;
}

/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {
    .jumbotron {
        margin-top: 200px;
    }
}

.autohide {
    /* display:initial;*/
}

    .autohide:empty {
        display: none !important;
    }

.twrap {
    white-space: pre-wrap;
    vertical-align: Bottom;
    width: 50px;
}

.tnowrap {
    white-space: nowrap;
    width: 50px;
    vertical-align: top;
}

.HrInput {
    text-align: center;
    color: green;
    width: 50px;
}

.vpInput {
    text-align: center;
    color: blue;
    width: 40px;
}

.dInput {
    text-align: center;
    color: black;
    width: 60px;
}

.HrView, .HrViewT {
    text-align: center;
    color: green;
    width: 50px;
}

.OHView, .OHViewT {
    text-align: center;
    color: green;
    width: 50px;
}

.vpView {
    text-align: center;
    color: blue;
    width: 40px;
}

.dView {
    text-align: center;
    color: black;
    width: 60px;
}

.hidden {
    display: none;
}

.csshidden {
}

@media print {

    .csshidden {
        display: none;
        width: 0px;
        height: 0px;
    }
}

.header {
    text-align: center;
    vertical-align: bottom;
}

.pocenter, .pocenterT {
    text-align: center;
    width: 100px;
    background-color: aqua;
    text-space-collapse: preserve;
    display: inline-block;
}

#TimeCard {
    overflow-x: scroll;
    text-align: left;
    width: 400px; /* i.e. too small for all the columns */
}

.pinned {
    position: Relative; /* i.e. not scrolled */
    background-color: White; /* prevent the scrolled columns showing through */
    z-index: 100; /* keep the pinned on top of the scrollables */
}

.scrolled {
    vertical-align: top;
    position: Relative;
    left: 0px; /* i.e. col1 Width + col2 width */
    overflow: hidden;
    white-space: nowrap;
    min-width: 100px;
    max-width: 100px; /* set your real column widths here */
    /* height: 80px;*/
}

.scrolledX {
    position: Relative;
    left: 0px; /* i.e. col1 Width + col2 width */
    overflow: visible;
    white-space: nowrap;
    min-width: 100%;
    max-width: 100%; /* set your real column widths here */
    /* height: 80px;*/
}

.scrolledF {
    vertical-align: bottom;
    position: Relative;
    left: 0px; /* i.e. col1 Width + col2 width */
    overflow: visible;
    white-space: nowrap;
    min-width: 100%;
    max-width: 100%; /* set your real column widths here */
    /* height: 80px;*/
}

.scrolledH {
    position: Relative;
    left: 0px; /* i.e. col1 Width + col2 width */
    overflow: hidden;
    white-space: pre-wrap;
    min-width: 50px; /* set your real column widths here */
    max-width: 50px;
}

.col1 {
    left: 0px;
    width: 230px;
}

.col1p {
    left: 0px;
    width: 100%;
    max-width: 300px;
}

.Legend text {
    font-size: smaller;
}

.TimePick ul {
    height: 1000px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}

.TimePick label {
    font-size: smaller !important;
    display: block;
    margin-top: 15%;
    margin-bottom: 15%;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

.TimePick .pm1 .row {
    background-color: #cccccc;
}

.TimePick .row * {
    margin-left: 0px !important;
}

.alternate * {
    background-color: #ececec;
}

.fade.in {
    opacity: 1;
}

.modal.in .modal-dialog {
    -webkit-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0);
}

.modal-backdrop .fade .in {
    opacity: 0.5 !important;
}


.modal-backdrop.fade {
    opacity: 0.5 !important;
}

.Decontain {
    margin-left: -10px !important;
}

.container {
    /*margin-left: 10px;*/
}

.openpanel {
    overflow: !important auto;
}

.thinborder {
    border-width: 1px;
}

.tdthborder td {
    border-width: 1px;
}


.QCImageBlock a {
    position: absolute;
    top: 0px;
    right: 10px;
}

.QCImageBlock {
    width: 100%;
    position: relative;
    padding: 0px;
    border: 1px solid black;
}

    .QCImageBlock img {
        height: 100%;
        width: 100%;
        object-fit: cover;
    }

.NotesInput {
    max-width: unset;
    width: 100%;
}

.QCImageBlock .deleteimage {
}

.deleteimage:active {
    display: none;
}

.deleteimage {
    position: absolute;
    top: 0px;
    right: 10px;
    z-index: 3000;
    background-color: white;
}


.confirmdelete {
    position: absolute;
    top: 0px;
    right: 10px;
    z-index: 1;
}

.InvTable td, .InvTable th, .InvTable tr {
    border: 0px;
}

.InvTable tr {
    border: 0px;
}

.InvTable {
    border: 0px;
}

td.InvValue {
    text-align: center;
    z-index: 0;
}

.InvValueH {
    text-align: center;
    z-index: 0;
}

.textentry {
    text-align: inherit;
}

.sep {
    width: 20px;
}

tbody! {
    z-index: -1;
    position: static;
}

    tbody! a {
        z-index: 2000;
    }

.sepitem {
    padding: 0 20px;
    border-left: 1px solid gray;
    border-right: 1px solid gray;
}

.numberinput {
    Width: 80px;
}

.rightValue, .leftLabel2, .leftLabel {
    white-space: nowrap;
}

@media (max-width: 768px) {
    .linkback {
        display: none;
        height: 0px;
    }

    td.InvValue {
        text-align: left;
        max-width: 360px;
    }

    .rightValue {
        right: var(--LabelInset);
        position: relative;
        overflow-x: hidden;
        display: inline-block;
    }

    .farRightValue {
        right: var(--LabelInset);
        position: relative;
    }

    .rightInput {
        right: var(--LabelInset);
        position: relative;
    }

    tr.bottoms {
        border-bottom: 1px solid black;
        /* z-index:4000;*/
    }

    .itemHeader {
        background-color: lightgray;
        left: 0px;
    }

    .leftLabel {
        text-align: right;
        right: -80px;
        position: absolute;
        padding-right: 90%;
        font-weight: 700;
    }

    .leftLabel2 {
        text-align: right;
        right: 0px;
        position: absolute;
        margin-right: 65%;
        font-weight: 700;
    }

    .wideenough {
        width: 80vw;
    }
}


td:has(.active) {
    background-color: lightgray;
}

.ListBody {
    z-index: -1;
    position: relative;
}

.ListHeader {
    width: 100%;
    top: 58px;
    background-color: lightgrey;
    position: sticky;
    z-index: 505;
}

.ListHeader0 {
    width: 100%;
    top: 152px;
    background-color: lightgrey;
    position: sticky;
    z-index: 505;
}

.ListHeader2 {
    top: 78px;
    background-color: lightgrey;
    width: 100%;
    border-bottom: 1px solid black;
    position: sticky;
    z-index: 504;
}

.ListHeader3 {
    top: 226px;
    background-color: lightgrey;
    width: 100%;
    position: sticky;
    z-index: 503;
}

.ListHeader4 {
    top: 128px;
    background-color: lightgrey;
    width: 100%;
    position: sticky;
    z-index: 502;
}

.ListFooter {
    bottom: 0px;
    background-color: lightgrey;
    max-width: 780px;
    width: 100%;
    position: sticky;
    z-index: 501;
}

.blocked {
    position: relative;
}

.rightEdge {
    position: absolute;
    right: 0px;
}

.myTable th {
    padding: 0px 10px;
    min-width: 60px;
}

.myTable2, .myTable2 th, .myTable2 td {
    padding: 0px 10px;
    border: 0px;
}

.myTable td, .myTable th {
    min-width: 60px;
    overflow: hidden;
}

tr.bottoms th {
    border-bottom: 1px solid black;
}

.lefts {
    text-align: left;
}

.TextColumn {
    z-index: 100;
}

.myTable td.TextColumn {
    text-align: left;
}

.myTable td.TextRowHeader, .myTable th.TextRowHeader {
    min-width: 240px;
    z-index: 100;
}


.myTable4 {
    width: 90%;
}

    .myTable4 td, .myTable4 th {
        padding: 0px 20px;
        width: 100%;
    }
.qclistTable
{
   
    position:relative;
    width:100%;
}
.POHost {
    margin-top: 3px;
    position: relative;
    top: 0px;
    width: calc(100% - 10px);
}

.POHost2 {
    padding: 0px;
    position: relative;
    top: 0px;
    height: calc(100vh - 85px);
   
    display: flex;
    flex-direction: column;
    flex-wrap:nowrap;
    
    margin: 0;
}


.PreG {
    display: block;
    position: relative;
    overflow: clip;
    height: fit-content;
    border: 1px solid black;
}

.POGL1 * {
}

.POGElev {
    width: 200px;
}

.POGPlan {
    width: 16em;
}

.POGQC {
    width: 16em;
}

.fail {
    background-color: red;
}

.scheduled, .Scheduled {
    background-color: lightblue;
}

.unscheduled {
    background-color: yellow;
}

.Unscheduled {
    background-color: white;
}

.Prescheduled {
    background-color: lightcyan;
}

.Complete {
    background-color: lightgreen;
}

.POGLotAddress {
    width: 16em;
}

.POGLot {
    width: 11em;
    font-weight: 700;
    position: sticky;
    top: 24px;
    background-color: white;
    z-index: 2;
}

.POGQty {
    width: 10em;
    font-weight: 700;
}

.POGVendor {
    width: 11em;
    font-weight: 700;
}

.POGL2 {
    top: 1.5em;
    background-color: lightgray;
    left: 0px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    column-gap: 1em;
    z-index: 1;
}

.POGLabelGroup {
    position: relative;
    background-color: lightgray;
    column-gap: .5em;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
}

.POGLabelGroup2 {
    position: relative;
    background-color: lightgray;
    column-gap: .5em;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
}

.POGL2 input:not(.POGOrdNote) {
    width: 8em;
}


.POGL2 span {
}

.POGL2 input:invalid {
    background-color: lightyellow;
}

.POGL2 input:valid {
    background-color: lightgreen;
}

.POGBldrlbl {
    order: 1;
    width: 4.5em;
}

.POGBldrDate {
    order: 2;
}

.POGCitylbl {
    width: 4.5em;
    order: 3;
}

.POGCityDate {
    order: 4;
}

.POGePanelslbl {
    order: 5;
    width: 4.5em;
}

.POGePanels {
    order: 6;
}

.POGBoxWraplbl {
    order: 7;
    width: 4.5em;
}

.POGBoxWrap {
    order: 8;
}

.POGroupAMs {
    background-color: white;
    z-index: 1000;
    position: sticky;
    border-bottom: 1px solid black;
   /* top: 56px;*/
    /*width: 100%;*/
    flex-shrink:0;
}

.POGroupAMBlock {
    background-color: white;
    z-index: 1000;
    padding: 0 1em;
    margin: auto;
    display: flex;
    justify-items: center;
    flex-wrap: wrap;
    gap: .5em;
    width: 100%;
}

.lnkPrePour {
    display: block;
}

.lnkPrePourm {
    color: red;
}

.POGL1 {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    column-gap: 1em;
}
.clsPhaseGroup {
    position: relative;
   
    display: block;
  
    top:0px;
    
}
@media (max-width:768px) {
    .clsPhaseGroup1 {
       
        height: calc(86vh - 3em);
    }
}
@media (max-width:450px) {
    .clsPhaseGroup1 {
        height: calc(86vh - 6em);
    }
}
    @media (min-width:800px) {
        .POGroup, .POGroup2 {
        }

        .POGroup3 {
            height: auto;
        }

        .POGL1 {
            column-gap: 3em;
        }
    }

    @media (max-width:500px) {
        .POGroup, .POGroup2 {
        }

        .POGroupAMs input {
            margin: 0 0;
        }

        .POGL1 {
            column-gap: 1em;
        }
    }




    .POGroupName2, .POGroupAM {
        background-color: steelblue;
        position: sticky;
        top: 0px;
        display: block;
        z-index: 3;
    }



    .POGroupDate2, .POGroupBuilder {
        background-color: cyan;
        position: sticky;
        top: 22px;
        display: block;
        z-index: 2;
    }

    .POGroupProject {
        background-color: lightgray;
        position: sticky;
        top: 22px;
        display: block;
    }

    .POGroupLot {
        background-color: lightblue;
        position: sticky;
        top: 22px;
        display: inline-block;
    }

    .POGroupCrew2 {
        background-color: gray;
        color: gold;
        position: sticky;
        top: 44px;
        display: inline-block;
    }

    .POBlock {
        width: min-content;
    }

    .PONote {
        font-style: italic;
        font-size: small;
        width: 100%;
        display: inline-block;
        padding-left: 1em
    }

    .POG {
        display: inline-block;
        flex-grow: 2;
    }

    .POPhaseText {
        display: flex;
        flex-direction: row;
    }

    .PORedoTag {
        flex-grow: 1;
        font-style: italic;
        font-size: small;
        display: inline-block;
    }

    .POBanner {
        position: relative;
        overflow: auto;
        display: block;
    }

    .POGroup, .POGroup2, .POGroup3 {
        position: relative;
        overflow: auto;
        display: block;
        margin: 0px 0px;
    }
.POGroup2, .POGroup2F {
    flex-shrink: 1;
    margin: 0;
    min-height: 0;
}
    .rowdata {
        top: 86px;
        display: inline-block;
    }

    .POGroup2F {
        width: 90vw;
        top: 4px;
        position: relative;
        overflow: auto;
        display: block;
        margin: 20px auto;
        height:84vh;
    }

    .POGroup {
    }

    .POHost td, .POHost th, .POHost2 td, .POHost2 th {
        vertical-align: top;
    }

    .POGroupDate {
        background-color: lightslategray;
        position: sticky;
        top: 75px;
        display: block;
        z-index: 2;
    }

    .POGroupCrew {
        background-color: gray;
        position: sticky;
        top: 97px;
        display: block;
        z-index: 1;
    }

    .POGroupUnassigned {
        background-color: gray;
        position: sticky;
        top: 120px;
        display: block;
    }

    span.POGroupCrew2, span.POGroupLot {
        width: calc(100% - 2em);
    }

    a.POGroupCrew2, a.POGroupLot {
        width: 2em;
        z-index: 1;
    }

    .POGroupConfirm {
        display: block;
        width: 100%;
    }

    .POGroupData, .POGroupSuffix {
        display: inline-block;
        width: 100%;
    }

    .POGroupOrders {
        display: inline-block;
        padding-left: 1em;
        line-height: 1em;
        font-style: italic;
        width:100%;
    }

    .POGroupData label, .POGroupSuffix label {
        width: 89%;
    }

    .POGroupData input, .POGroupSuffix input {
    }

    .POGroupCrew:checked {
        color: steelblue;
    }

    .POGroupComplete {
        background-color: lightgreen;
    }

    .POGroupScheduled {
        background-color: lightblue;
    }

    .POGroupPreScheduled {
        background-color: lightgoldenrodyellow;
    }
.POGroupBody {
  
}
.POGroupFooter {
    bottom: 0px;
    background-color: lightgrey;
    width: calc(100% - 30px);
    display: flex;
    flex-direction: column;
    z-index: 501;
    position: fixed;
}

.POGroupFooterMenu {
    order: 2;
    bottom: .25em;
    background-color: lightgrey;
    width: calc(100% - 20px);
    display: flex;
    flex-direction: row;
    position:fixed;
    z-index: 501;
    justify-content: space-evenly;
}
.POGroupFooterMenuDynamic {
   position:relative;
}

        .POGroupFooterMenu table {
            margin: auto;
        }

        .POGroupFooterMenu td {
            padding: 0 4em;
        }

    .POGroupUnschedule * {
        text-decoration-line: line-through;
        background-color: lightgrey;
    }

    .POGroupSplit * {
        text-decoration-line: line-through;
        background-color: lightcyan;
    }

    .Collapse {
        height: 1.5em;
        display: block;
    }

    .CollapseDate *:not(.POGroupDate2,.PrePourDate2) {
        display: none;
    }

    .CollapseName *:not(.POGroupName2,.PrePourName2) {
        display: none;
    }

    .CollapseCrew *:not(.POGroupCrew2, .PrePourCrew2) {
        display: none;
    }

    .CollapseAM *:not(.POGroupAM, .PrePourAM) {
        display: none;
    }

    .CollapseBuilder *:not(.POGroupBuilder, .PrePourBuilder) {
        display: none;
    }

    .CollapseProject *:not(.POGroupProject, .PrePourProject) {
        display: none;
    }

    .CollapseLot *:not(.POGroupLot, .PrePourLot) {
        display: none;
    }

    .POTypeView {
        margin-left: 2em;
    }

    .PreGroupFooter {
        bottom: 0px;
        background-color: lightgrey;
        width:100%;
        display: flex;
        position: fixed;
        z-index: 501;
        justify-content: space-evenly;
    }

    .PrePourAMs {
        background-color: white;
        z-index: 1000;
        display: flex;
        position: fixed;
        border-bottom: 1px solid black;
        top: 56px;
        width: 100%;
        justify-items: center;
    }

    .PrePourAMBlock {
        background-color: white;
        z-index: 1000;
        padding: 2px 1em;
        margin: auto;
    }

    .PrePourAMs input {
        margin: 0 1em;
    }

    @media (min-width:1020px) {
        .PrePour, .PrePour2 {
        }
    }

    .PrePour2 {
        position: fixed;
        top: 58px;
        height: 84vh;
    }

    @media (max-width:500px) {
        .PrePour, .PrePour2 {
        }

        .PrePourAMs input {
            margin: 0 0;
        }
    }

    @media (max-width:650px) and (min-width:480px ) {
        .POGL2 {
            width: 325px;
        }
    }

    @media (max-width:1400px) {
        .POGOrdNote {
            width: 90%
        }

        .POGLabelGroup2 {
            width: 100%;
            max-width: 58em;
        }
    }

    @media (min-width:1400px) {
        .POGOrdNote {
            width: calc(100% - 2em);
        }

        .POGLabelGroup2 {
        }
    }


    .PrePourName2, .PrePourAM {
        background-color: steelblue;
        position: sticky;
        top: 0px;
        display: block;
        z-index: 100;
    }

    .PrePourDate2, .PrePourBuilder {
        background-color: lightslategray;
        position: sticky;
        top: 0px;
        display: block;
        z-index: 100;
        font-weight: 900;
    }

    .PrePourName2 + span {
    }

    .PrePourProject {
        background-color: lightgray;
        position: sticky;
        top: 22px;
        display: block;
    }

    .PrePourLot {
        background-color: lightblue;
        position: sticky;
        top: 22px;
        display: inline-block;
    }

    .PrePourCrew2 {
        background-color: gray;
        position: sticky;
        top: 22px;
        display: inline-block;
        z-index: 100;
        font-weight: 800;
    }


    .PrePour, .PrePour2, .PrePour3 {
        top: 0px;
        position: relative;
        overflow: auto;
        display: block;
        margin: 20px;
    }

    .PrePour2F {
        width: 20em;
        top: 0px;
        position: relative;
        overflow: auto;
        display: block;
        margin: 20px auto;
    }

    .PrePour {
    }



    .PrePourDate {
        background-color: lightslategray;
        position: sticky;
        top: 75px;
        display: block;
    }

    .PrePourCrew {
        background-color: gray;
        position: sticky;
        top: 97px;
        display: block;
    }

    .PrePourUnassigned {
        background-color: gray;
        position: sticky;
        top: 120px;
        display: block;
    }

    span.PrePourCrew2, span.PrePourLot {
        width: 100%;
    }

    a.PrePourCrew2, a.PrePourLot {
        width: 10%;
    }

    .PrePourConfirm {
        display: block;
        width: 100%;
    }

    .PrePourData, .PrePourSuffix {
        display: block;
    }

        .PrePourData span, .PrePourSuffix span {
            width: 89%;
        }

        .PrePourData input, .PrePourSuffix input {
            width: 10%;
        }

    .PrePourCrew:checked {
        color: steelblue;
    }

    .PrePourComplete {
        background-color: lightgreen;
    }

    .PrePourScheduled {
        background-color: lightgoldenrodyellow;
    }

    .PrePourFooter {
        bottom: 0px;
        background-color: lightgrey;
        width: 99vw;
        display: flex;
        position: fixed;
        z-index: 501;
        justify-content: space-evenly;
    }

        .PrePourFooter table {
            margin: auto;
        }

        .PrePourFooter td {
            padding: 0 4em;
        }

    .PrePourUnschedule * {
        text-decoration-line: line-through;
        background-color: lightgrey;
    }

    .PrePourSplit * {
        text-decoration-line: line-through;
        background-color: lightcyan;
    }

    .lotTabs {
        display: inline-block;
    }

    .lotPhases {
        overflow: hidden;
    }

    .lotMenu option[selected] {
        background-color: blue;
    }

    .lotMenu {
        z-index: 20000;
        background-color: white;
    }

        .lotMenu li {
            padding: .25em;
        }

    .lotRightPanel, .lotLeftPanel1 {
        position: relative;
        width: 100%;
        padding-right: .5em;
    }

    .menuBack {
        display: inline-block;
        background-color: lightgray;
        padding-left: .25em;
        padding-right: .75em;
        height: 1em;
        left: 0%;
        margin: .25em;
        position: absolute;
    }

    .lotNameLabel {
    }


    .lotName {
        display: inline-block;
        width: 100%;
        border: solid black 1px;
        text-align: center;
    }

        .lotName * {
            font-weight: 700;
        }

    .lotTabs {
        padding-right: 1em;
    }

    .lotOverViewPanel {
        display: flex;
        flex-direction: column;
        padding-top: 5em;
    }

        .lotOverViewPanel * {
            width: 100%;
        }

    .lotPhaseLine {
        display: grid;
        grid-template-columns: 7em 5em 20em;
        gap: 1em;
        align-items: start;
        border-bottom: 1px solid forestgreen;
    }

    .lotOverViewLine {
        display: flex;
    }

    .lotPhaseName {
        grid-column: 1;
        grid-row: 1;
    }

    .lotPhaseSuffix {
        grid-column: 2;
        grid-row: 1;
    }

    .lotPhaseCrew {
        grid-column: 3;
        grid-row: 1;
        overflow-x: clip;
    }

    .lotQCLine {
        display: grid;
        grid-template-columns: 7em 5em 20em;
        gap: 1em;
        align-items: start;
    }

    .lotQCName {
        grid-column: 1;
        grid-row: 1;
    }

    .lotQCTime {
        grid-column: 3;
        grid-row: 1;
    }

    .lotQCResult {
        grid-column: 2;
        grid-row: 1;
        overflow-x: clip;
    }

    .labelLine {
        display: inline-block;
        font-weight: 700;
        padding-right: .5em;
        width: 5em;
        text-align: right;
    }

    .textLine {
        padding-left: .5em;
    }

    .lotHtmlLine {
        width: 90%;
        border-bottom: 1px solid lightgray;
        margin-left: 5%;
    }

    .lotHeaderLine {
        width: 4.5em;
        text-align: right;
        font-weight: 700;
    }

    .headerLine {
        padding-left: 2em;
        font-weight: 700;
        color: royalblue;
    }

    .detailLine {
        padding-left: 2em;
    }

    .titleLine {
        font-weight: 700;
        font-size: large;
        position: sticky;
        top: -2px;
        background-color: white;
        z-index: 1000;
    }

    .lotHeaderinfo {
        font-size: large;
        text-align: right;
        position: sticky;
        top: -2px;
        background-color: white;
        z-index: 1000;
    }

    .textBlock {
        display: grid;
        grid-template-columns: 6em 15% 20% fit-content();
        grid-auto-flow: Column;
        border-bottom: 1px solid gray;
        border-top: 1px solid black;
    }

    .textBlock2 {
        display: grid;
        grid-template-columns: 25% 20%;
        grid-auto-flow: Column;
        border-bottom: 1px solid gray;
        border-top: 1px solid black;
    }

    .shrink {
        font-size: smaller;
    }

    .titleLine2 {
        text-align: center;
        font-weight: 700;
        font-size: larger;
        border-bottom: 1px solid gray;
        border-top: 1px solid black;
        position: sticky;
        top: -2px;
        background-color: white;
        z-index: 1000;
    }

    .lotRightPanel, .lotLeftPanel {
        overflow-y: scroll;
    }

    .menuToggleButton {
        padding-left: .25em;
        padding-right: 1em;
    }

    .menuBack {
        display: inline-block;
        background-color: lightgray;
        width: .5em;
        height: 1em;
        right: 0%;
        margin: .25em;
        position: absolute;
    }

    .SubGroupFooter {
        bottom: 0px;
        background-color: lightgrey;
        width: 99vw;
        display: flex;
        position: fixed;
        z-index: 501;
        justify-content: space-around;
    }

        .SubGroupFooter table {
            margin: auto;
        }

        .SubGroupFooter td {
            padding: 0 4em;
        }

    .subsPayoutTable {
        position: relative;
        width: 100%;
        line-height: 1.5em;
        font-weight: unset;
        font-size: small;
        max-width: var(--SubsWidth);
    }

    .subsPayout {
        font-weight: initial;
    }



        .subsPayout.c1 {
            position: relative;
            left: 3%;
        }

        .subsPayout.c2 {
            left: 4%;
            position: relative;
            width: 4em;
            text-align: right;
        }

        .subsPayout.c3 {
            left: 4%;
            position: relative;
            width: 4em;
            text-align: right;
        }

        .subsPayout.c4 {
            position: relative;
            left: 4%;
            width: 4em;
            text-align: right;
        }

        .subsPayout.c5 {
        }

    .subsLotTable {
        border-bottom: 1px solid black;
        max-width: calc(var(--SubsWidth)+200px);
        position: relative;
    }

        .subsLotTable * {
            position: relative;
            padding: 0 1em;
            font-weight: 700;
        }

    .subsPhaseTable {
        max-width: var(--SubsWidth);
        position: relative;
        border: 1px solid black;
        left: 2em;
        width: calc(100vw - 3em);
        line-height: 1em;
        font-weight: 600;
        line-break: strict;
    }

        .subsPhaseTable * {
            top: 0;
        }

    .subsOrderTable {
        margin: 0;
        padding: 0;
        line-height: 1em;
    }

    .subsOrder.c1 {
        position: relative;
        margin-left: 20%;
        font-size: small;
        width: 100%;
        line-height: .5em;
        font-style: italic;
        font-weight: initial;
    }

    .subsInvoiceTable {
        margin: 0;
        padding: 0;
        line-height: 1em;
        background-color: aquamarine;
    }

    .subsInvoice.c1 {
        position: relative;
        margin-left: 2%;
        font-size: x-small;
        width: 100%;
        line-height: .5em;
        font-style: italic;
        font-weight: initial;
    }

    .subsPhase.c1 {
        position: relative;
        left: .5vw;
    }

        .subsPhase.c1 label {
            margin: 0;
            padding-left: .5em;
        }

    .subsPhase.c2 {
    }

    .subsPay {
        right: 0;
        position: absolute;
        text-align: right;
        width: 4em;
        padding: 0 4px;
    }


    .SheetsRow {
        position: relative;
    }

        .SheetsRow *, .SheetsHdr * {
            display: inline-block;
            width: 6em;
        }

        .SheetsRow * {
            position: relative;
            text-align: right;
        }

    .SheetsRowLotEnter, .SheetsRowLotEnterDate, .SheetsRowLotStartDate, .SheetsRowLayoutDate, .SheetsRowPerDate, .SheetsRowSoilsDate, .SheetsRowGradeDate, .SheetsRowIntDate, .SheetsRowCableDate, .SheetsRowInspDate, .SheetsRowPourDate, .SheetsRowStripDate {
    }

    .SheetsHdr * {
        text-align: center;
    }

    .SheetsHdr {
        border-bottom: 1px solid black;
        position: sticky;
        top:0px;
        background-color: white;
        z-index: 1000;
    }

        .SheetsRowLot, .SheetsHdr.Lot {
            position: relative;
            width: 10em;
            top: 0;
            text-align: left;
        }

        .SheetsRowAddress, .SheetsHdr.Address {
            position: relative;
            width: 17em;
            text-align: left;
            top: 0;
        }

    .SheetsRowData.C, .SheetsRowData.Pass {
        background-color: lightgreen;
    }

    .SheetsRowData.S {
        background-color: lightblue;
    }

    .SheetsRowData.U {
        max-height: 0px;
    }

    .SheetsRowData.Fail {
        background-color: yellow;
    }

    .SheetsRow.Notes {
        display: inline-block;
        overflow: clip;
        width: 20em;
        max-height: 1.5em;
    }

    .SheetsRowLabel {
        display: none;
    }

    .LotInfoBlock {
        border: 1px solid gray;
        margin-bottom: .5em;
    }

    .LotInfoTitle, .WOHdr, .WOPhaseHdr {
        background-color: lightgray;
        font-weight: 700;
        display: block;
        border-bottom: 1px solid black;
    }

    .LotInfoLabel {
        font-weight: 700;
        display: inline-block;
        width: 7em;
        text-align: right;
        padding-right: .5em
    }

    .LotInfoWOPay {
        display: inline-block;
    }

    .WOLabel {
        font-weight: 700;
        display: inline-block;
        width: 7em;
        text-align: right;
        padding-right: .5em
    }

    .WOLabelDesc {
        font-weight: 700;
        display: block;
        width: 7em;
        text-align: right;
        padding-right: .5em
    }

    .WODataDesc {
        display: block;
        padding-left: 1em
    }

    Img.ImagePopup {
        width: 100%;
        height: auto;
    }

    .LotFileImg {
        height: auto;
        max-width: 250px;
    }

    .LotFileLine {
        position: relative;
        line-height: 1.5em;
        vertical-align: top;
        padding: .5em;
    }

    .LotFileDesc {
        min-width: 15em;
        overflow-x: auto;
        display: inline-block;
    }

    .LotFileName {
        display: inline-block;
        padding-right: 1em;
        min-width: 25em;
        overflow-x: auto;
    }

    .LotFileUser {
        display: inline-block;
        padding-right: 1em;
        min-width: 15em;
        overflow-x: auto;
    }

    .LotFileTime {
        display: inline-block;
        padding-right: 1em;
        min-width: 15em;
        overflow-x: auto;
    }

    .LotFileComponent {
        display: inline-block;
        padding-right: 1em;
        min-width: 15em;
        overflow-x: auto;
    }

    .LotFileDelete {
        max-width: 1em;
    }

    .linkOpenlot {
        position: absolute;
        right: 0px;
        margin: .2em .1em;
        width: 1.5em;
        background-color: silver;
        border: 1px solid gray;
        text-align: center;
    }

    .showall {
        padding-left: 1em;
    }

    .Menutoggle {
        width: 100%;
        text-align: center;
        display: none;
        order: 99;
    }
    .lotTable{
        position:relative;
        top:0px;
    }
.lotTable th{

    position: sticky;
    top: 142px;
    background-color:white;
}
    @media (max-width:1150px) {

        .CellBlock {
            width: 100%;
            line-height: 0em;
        }

            .CellBlock.Collapse {
                width: 100%;
                display: none;
                line-height: 0em;
            }

        .SheetsRowLabel {
            display: inline-block;
            font-weight: 700;
            text-align: right;
        }

            .SheetsRowLabel.LotStartDate {
                width: 5em;
            }

        .SheetsRowData {
            /*display: inline-block;*/
            width: calc(100vw - 8em);
            font-weight: 700;
            text-align: right;
        }

        .SheetsRow * {
            left: 1em;
            text-align: left;
            top: 0px;
            position: relative;
        }

        .SheetsRowLot {
            width: 100%;
            font-weight: 700;
        }

        .SheetsHdr * {
            display: none;
        }

        .CellBlockLotStartDate {
            position: absolute;
            left: 11em;
            width: 18em;
        }

            .CellBlockLotStartDate * {
                display: inline-block;
            }

        .SheetsRowLotStartDate {
            width: 10em;
        }

        .SheetsRowLabel + .LotStartDate {
            width: 6em;
        }

        .SheetsRowLotEnter, .SheetsRowLotEnterDate, .SheetsRowLotStartDate, .SheetsRowLayoutDate, .SheetsRowPerDate, .SheetsRowSoilsDate, .SheetsRowGradeDate, .SheetsRowIntDate, .SheetsRowCableDate, .SheetsRowInspDate, .SheetsRowPourDate, .SheetsRowStripDate {
        }

        .ProjectLotId {
            display: none;
        }
    }

    @media (min-width:500px) {
        .lotContainer {
            display: flex;
        }



        .lotLeftPanel {
            width: 15em;
        }

        .lotRightPanel, .lotLeftPanel {
            height: 85vh;
            top: 0px;
            border: solid black 1px;
            display: inline-block;
        }

        .menuToggleButton {
            display: none;
        }
    }

    @media (max-width:500px) and ( min-width:400px) {

        .lotOverViewLine {
            padding-top: .1em;
            padding-bottom: .1em;
        }

        .detailLine {
            border: 1px solid lightgray;
            padding: .5em;
        }

        .lotInfo {
            width: 100%;
        }

        .lotName {
            width: 100%;
        }

        .lotRightPanel1, .lotLeftPanel {
            border: solid black 1px;
            display: block;
        }

        .lotRightPanel {
            height: calc(88vh - 1.5em);
        }

        .lotLeftPanel {
        }

        .menuToggleButton {
            display: inline-block;
            background-color: lightgray;
            width: .5em;
            height: 1em;
            right: 0%;
            margin: .25em;
            position: absolute;
            text-align: center;
        }

        .CollapseMenu {
            display: none;
        }
    }

    @media (max-width:600px) {
        .subsLotTable * {
            position: relative;
            display: block;
        }

        .Menutoggle {
            display: block;
        }

        .expandedMenu {
            display: none;
        }

        .POGroupFooterMenuDynamic {
            text-align: center;
            flex-direction: column;
        }

            .POGroupFooterMenuDynamic a {
                padding: 0em .5em;
            }
    }

    @media (max-width:400px) {




        .lotOverViewLine {
            display: block;
            padding-top: .1em;
            padding-bottom: .1em;
            text-align: center;
        }

        .detailLine {
            border: 1px solid lightgray;
            text-align: center;
        }

        .lotContainer {
        }

        .labelLine {
            display: block;
            width: 100%;
            text-align: center;
            padding: unset;
        }

        .textLine {
        }

        .titleLine {
            width: 100%;
            padding: unset;
        }

        .headerLine {
            text-align: center;
            padding-left: unset;
        }

        .lotInfo {
            width: 100%;
        }

        .lotName {
            width: 100%;
        }

        .lotRightPanel, .lotLeftPanel {
            width: 95vw;
            border: solid black 1px;
            display: block;
        }

        .lotRightPanel {
            height: calc(88vh - 1.5em);
        }

        .lotLeftPanel {
        }


        .menuToggleButton {
            display: inline-block;
            background-color: lightgray;
            width: .5em;
            height: 1em;
            right: 0%;
            margin: .25em;
            position: absolute;
        }

        .CollapseMenu {
            display: none;
        }
    }

    .ProjectLotId {
        display: none;
    }

    .OrderInfo {
        width: 95vw;
        background-color: lightgray;
        text-align: left;
        font-style: italic;
        font-size: smaller;
        padding-left: 2em
    }