@font-face{
  font-family:"Effra Light";
  src:url('fonts/effra-light-webfont.ttf');
}
@keyframes loginFade{
  from{opacity:1;}
  to{opacity:0;}
}

body{
  background-color: #f7f7f7;

  display: flex;
  flex-direction: column;
  font-size: 18px;
  height: 100%;
  letter-spacing: 1px;
  line-height: 25px;
  margin: 0;
  padding:0;
  width: 100%;
}

button{
  height:31px;
  margin:5px 6px 0 0;
  padding:5px;
  text-transform: uppercase;
}
button:last-child{
  margin-right: 0;
}


details{
  color: #000;
  cursor: pointer;
  font-weight: bold;
  text-decoration: underline;
}

details > summary{
  list-style: none;
}

details > img{
  background-color: #FFF;
  border: 1px solid black;
}

html {
  height: 100%;
  width: 100%;
}

:popover-open {
  border-radius: 10px;
  border-width: 0;
  box-shadow: 5px 10px 8px #888888;
  container-type:size;
  padding: 0 10px;
}

::backdrop {
  backdrop-filter: blur(3px);
}

figure {
  display: flex;
  flex-flow: column;
  padding: 5px;
  width: fit-content;
  margin: auto;
}

figcaption {
  background-color: #777;
  color: #fff;
  font-weight: bold;
  padding: 3px;
  text-align: center;
}
.closeX{
  border-radius: 100%;
  background-color: #f90023;
  border: none;
  color: #FFF;
  cursor: pointer;
  float: right;
  height: 25px;
  position: relative;
  right: -5px;
  top: 10px;
  width: 25px;
  z-index: 999;
}
.closeX:hover{
  box-shadow: 0 0 12px #888888;
}

#customItemDescription{
  max-width: unset;
}

[popover] {
  animation: fadeInPopover 0.25s ease-in;
}

@keyframes fadeInPopover {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.adminSectionHeader{
  margin-top: 0;
  margin-bottom: 11px;
}
.adminTitle{
  margin-left: 5%;
  margin-top: 20px;
}
.advSearchClose{
  display:none;
}
.assignTo{
  align-items: center;
  display: flex;
  height:19px;
  width: max-content;
}
.assignTo input{
  margin: 0 3px;
  height: auto;
  width: unset;
}
.assignToPM{
  border-bottom: 1px solid black;
}

.badRow td{
  background-color: rgba(255, 0, 0, 0.35) !important;
  border-bottom: 1px solid #AAA;
  color: #000 !important;
}

#baselineOptimizedDataRollup h3{
  text-align:center
}
.baselineOptimizedDataRollupTable{
  width:100%;
  max-width:600px;
  text-align:center
}
.baselineOptimizedDataRollupTable td{
  text-align:right
}
.baselineOptimizedDataRollupTable tr > td:first-child{
  width:65%;
  font-weight:bold;
  text-align:left
}

.bomPartRow td{
  padding-left: 5px;
  width:  unset;
}
.bomPartInput{
  width: 100%;
}

.bomQtySet{
  width: 60px;
}

.bomCheckbox{
  height: unset;
}

.bomPartAddQty{
  margin-right: 5px;
  max-width: 60px;
  width: fit-content;
}

.bomVendorHeader{
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-left: 5px;
  margin-right: 5px;
  margin-top: 10px !important;
  text-align: left;
}

.bomVendorHeader > h3 > span{
  color: #6d6f71;
}

.bomVendorHeader > h3:last-child{
  text-align: right;
}

.button1{
  background:#4bacc6;
  border-radius:8px;
  box-shadow:0 0 0 #888888;
  color:#FFF;
  cursor:pointer;
  display:inline-block;
  font-size:28pt;
  margin:auto;
  padding:8px 13px;
  transition:box-shadow 0.3s ease-in;
}
.button1:hover{
  box-shadow:0 0 12px #888888;
}
.button2{
  background:#4bacc6;
  border-radius:40px;
  box-shadow:0 0 0 #888888;
  color:#FFF;
  cursor:pointer;
  display:inline-block;
  font-size:32pt;
  margin:auto;
  padding:0 12px;
  transition:box-shadow 0.3s ease-in;
}
.button2:hover{
  box-shadow:0 0 12px #888888;
}
.button3{
  background:#4bacc6;
  border-radius:8px;
  box-shadow:0 0 0 #888888;
  color:#FFF;
  cursor:pointer;
  display:inline-block;
  font-size:28pt;
  margin:20px;
  padding:8px 13px;
  transition:box-shadow 0.3s ease-in;
}
.button3:hover{
  box-shadow:0 0 12px #888888;
}
.button4{
  background:#4bacc6;
  border-radius:8px;
  box-shadow:0 0 0 #888888;
  color:#FFF;
  cursor:pointer;
  display:inline-block;

  font-size:16pt;
  margin-right:6px;
  padding:8px 13px;
  text-transform: uppercase;
  transition:box-shadow 0.3s ease-in;
}
.button4-Off{
  background:#777 !important;
  cursor:default !important;
}
.button4:hover{
  box-shadow:0 0 12px #888888;
}
.button4:active{
  color:#000;
  box-shadow:0 0 12px #888888;
}
.button4:disabled{
  background-color: #888;
  box-shadow: unset;
  color:#FFF;
  cursor:auto;
}
.button4:disabled:hover{ /*/ , disabled:active*/
  box-shadow: unset;
  color:#FFF;
  cursor: not-allowed;
}
.chartBorder{
  width:900px;
  height:400px;
  border:1px solid #AAA;
}
.checkbox{
  height:auto;
  width:auto;
}
#companyButtons{
  margin:60px 0;
  text-align:center;
}
#companyLogo{
  background-color:#fff;
  background-position:center center;
  background-repeat:no-repeat no-repeat;
  background-size:contain;
  border:1px solid #c9c9c9;
  color:#adadad;
  cursor:pointer;
  font-family:Arial, serif;
  font-size:10pt;
  height:100px;
  position:relative;
  text-align:center;
}
#companyLogoInstructions{
  padding-top:5px;
  font-size:16px;
}
.companySection{
  background:#f9f9f9;
  border:1px solid #ddd;
  border-radius:8px;
  color:#7f7f7f;
  display:inline-block;
  margin: 120px 20px 20px;
  padding:20px;
  position:relative;
  text-align:left;
  vertical-align:top;
  width:80%;
}
.companySections{
  position:relative;
  text-align:center;
  width:auto;
}
.companySectionText{
  font-size:14pt;
  padding: -20px 0 0;
  vertical-align:top;
}
.companySectionTitle{
  font-size:28pt;
}
.contentDark{
  background-color: #F7F7F7;
  color: #000;
  flex: 1 0 auto;
  margin-top: 40px;
  padding: 0 !important;
  position:relative;
  width:100%;
}
.contentLight{
  background:#fff;
  color:#333333;
  padding: 160px 30px 30px;
  position:relative;
  flex-grow: 1;
}
.contentLightResponsive{
  background:#fff;
  color:#333333;
  padding: 80px 30px 30px;
  z-index:-1;
}
.contentLightResponsive h1{
  font-size:2em
}
.contentLightResponsive h2{
  font-size:1.5em
}
.copyright{
  color:#7f7f7f;
  font-size:10pt;
  padding-bottom:10px;
  text-align:center;
}

.details{
  display:none;
}
.detailsHeading{
  font-weight:bold;
}
.detailsImage{
  border:1px solid #7f7f7f;
  float:left;
  height:400px;
  margin:0 20px 20px 0;
  padding:8px;
}
.detailsImage img{
  height:100%;
  width:auto;
}
.detailsImageSmall{
  float:left;
  height:220px;
  margin:0;
  padding:0 8px 8px 0;
}
.detailsImageSmall img{
  height:100%;
  width:auto;
}
.detailsSubHeading{
  text-decoration:underline;
}
.detailsTitle{
  font-size:28pt;
}
.detailsWindow{
  bottom:0;
  left:0;
  opacity:0;
  pointer-events:none;
  position:fixed;
  right:0;
  top:0;
  transition:opacity 0.5s ease-in;
  z-index:12;
}
#detailsWindowBackground{
  background:#000;
  height:100%;
  opacity:0.5;
  position:absolute;
  width:100%;
}
#detailsWindowContent{
  background:#fff;
  /*border:1px solid #7f7f7f;*/
  font-size:14pt;
  height:100%;
  opacity:1;
  overflow-y:scroll;
  padding:13px;
  position:relative;
}
#detailsWindowClose{
  height:40px;
  margin-top:10px;
  text-align:right;
}
#detailsWindowFrame{
  background:#ddd;
  border:1px solid #7f7f7f;
  border-radius:8px;
  bottom:10%;
  box-shadow:0 0 10px #333;
  left:20%;
  opacity:0.99;
  padding:0 20px 140px 20px;
  position:fixed;
  right:20%;
  top:10%;
}
.detailsWindowShow{
  pointer-events:auto;
  opacity:1;
}
#detailsWindowTitle{
  color:#7f7f7f;
  font-size:20pt;
  font-weight:bold;
  height:40px;
  padding-top:12px;
}
.documentButtons{
  margin-top:15px;
}
.documentButtons input[type="submit"] {
  width:90px;
}
.documentIcon{
  border-radius: 100%;
  height:25px;
  width:25px;
  margin-top: 3px;
}

.documentIcon img{
  max-width:86% !important;
}
#packagePartDocumentList{
  background-color:#fff;
  background-position:center center;
  background-repeat:no-repeat no-repeat;
  background-size:80%;
  border:1px solid #767676;
  border-radius: 3px;
  color:#adadad;
  font-family:Arial, serif;
  font-size:10pt;
  height:auto;
  min-height:120px;
  max-height:180px;
  max-width: 1000px;
  overflow-y: auto;
  position:relative;
  width: 100%;
}

#documentList{
  background:#fff;
  border:1px solid #767676;
  border-radius: 3px;
  color:#adadad;
  font-family:Arial, serif;
  font-size:10pt;
  height:auto;
  max-height:180px;
  max-width: 1000px;
  min-height:120px;
  overflow-y:scroll;
  position:relative;
  text-align:center;
}
.documentList{
  background-color:#fff;
  border:1px solid #767676;
  border-radius: 3px;
  color:#adadad;
  font-family:Arial, serif;
  font-size:10pt;
  height:auto;
  max-height:180px;
  max-width: 50%;
  min-height:120px;
  overflow-y: auto;
  position:relative;
}
.documentListItem{
  float:left;
  display:inline-block;
  margin:10px;
  width:105px;
  cursor:pointer;
}
.deliverySignatureImage{
  height: fit-content !important;
  max-height: unset !important;
  min-height: unset !important;
  overflow-y: unset !important;
  width: fit-content !important;
}

.dropdownButton{
  align-content: center;
  cursor: pointer;
  transform: rotate(270deg);
  width: 25px;
}


.employee{
  background:#f9f9f9;
  border:1px solid #ddd;
  border-radius:8px;
  display:inline-block;
  margin:20px;
  padding:20px;
  text-align:left;
  vertical-align:top;
  width:240px;
}
.employeeButton{
  box-shadow:0 0 0 #888;
  height:50px;
  text-align:center;
}
.employees{
  color:#7f7f7f;
  display:inline-block;
  margin:20px;
  margin-top:120px;
  position:relative;
  text-align:center;
  vertical-align:top;
}
.employeesTitle{
  font-size:28pt;
}
.employeeName{
  font-size:14pt;
  font-weight:bold;
}
.employeePhoto{
  background:#ccc;
  height:220px;
  margin-bottom:10px;
  overflow:hidden;
}
.employeeText{
  font-size:12pt;
}
.employeeTitle{
  font-size:14pt;
}
#estimateName{
  width:100%;
}
#estimateSummaryContent{
  margin-bottom:100px;
  margin-top:60px;
  text-align:center;
}
#estimateSummaryProperties{
  display:inline-block;
  text-align:left;
  vertical-align:top;

}
.extraDivider{
  flex: 0 0 150px
}
#partsAdminPage{
  width: 100%;
  max-width: 1000px;
  /*border: 1px dashed grey;*/
}
#partsAdminPage .adminTitle{
  margin-left: 0;
}

.summaryTable{
  border:1px solid #777;
  max-height: 500px;
  overflow-y: scroll;
}
.summaryTable table{
  border:0;
  height: 100%;
  width:100%;
}
.summaryTable th{
  background:#777;
  color:#FFF;
  padding:0 5px;
}
.summaryTable td{
  padding-left: 5px;
}
.summaryTable tr{
  height:31px;
}
.summaryTable tr:hover td{
  background:#DDD;
  color:#777;
}
.estimateSummaryTableCell{
  padding:0 5px;
}
.estimateWizardSection{
  text-decoration:none;
  font-size:1.1em;
  color:#6d6f71;
}
.estimateWizardSection:hover{
  font-weight:bold;
  color:rgb(0, 0, 0);
}
.estimateWizardSectionActive{
  font-weight:bold;
  font-size:1.1em;
  color:rgb(0, 153, 0);
}
.financialHeader{
  border-bottom:1px solid #333;
  display: inline-block;
}
.financingResultsTable{
  border:1px solid black;
  border-bottom:none;
  width:1165px;
}
.financialResultsColumn{
  display:inline-block;
  width:211px;
  border-right:1px solid black;
  margin-right:-3px !important;
  border-bottom:1px solid black;
  margin-left:0 !important;
}
.financialResultsColumn div{
  text-align:right;
  margin-left:0 !important;
  margin-right:0 !important;
  padding: 0 -1px 0 -1px;
}
.financingResultsTableHeader{
  font-weight:bold;
  vertical-align:bottom;
  font-size:14px;
  text-align:center !important;
  border-bottom:1px solid black;
  height:45px;
  padding-right:0 !important;
  background-color:#CCC;
}
.financingResultsTableHeader2{
  font-weight:bold;
  vertical-align:bottom;
  font-size:14px;
  text-align:center !important;
  border-bottom:1px solid black;
  height:45px;
  padding-right:0 !important;
  background-color:#CCC;
}
.financingResultsTableData div{
  display:inline-block;
  width:150px;
  vertical-align:bottom;
  font-size:12px;
  text-align:right;
}
.financingResultsNotes li{
  font-size:14px
}
.financialResultsTotal{
  background-color:#CCC;
  width:1159px;
  border-bottom:1px solid black;
}
.financialResultsTotal div{
  display:inline-block;
  font-weight:bold;
  border-right:1px solid black;
  padding-right:10px;
  text-align:right
}
.financialPaymentColumn{
  display:block;
  float:left;
  width:127px;
  border-right:1px solid black;
  margin-right:0;
  /*border-bottom:1px solid black;*/
}
.financialPaymentColumn div{
  border-bottom:1px solid black;
  padding-right:15px;
  text-align:right
}
.financialPaymentHeader{
  height:auto !important;
}
.financingPaymentTable{
  width:900px;
}
.financingPaymentTable th{
  text-align:center;
}
.financialTable td{
  text-align:right;
}

.financialTable th{
  text-align:center;
}
.financialTableTotalRow{
  border-top: 2px solid #000
}
.financialTableTotalRow td{
  font-weight:bold;
}
.financialYearColumn{
  text-align:center !important;
}

#footer{
  background:#e5e5e5;
  bottom: 0;
  border-top:1px solid #7f7f7f;
  color:#222;
  position:relative;
  flex-shrink: 0;
}
#footerDetails{
  margin:0 5%;
  padding-bottom:30px;
  text-align:center;
}
.footerDetailsSection{
  display:inline-block;
  margin:0 2%;
  text-align:left;
  vertical-align:top;
  width:28%;
}
.footerDetailsSection .footerTitle{
  border-bottom:1px solid #ccc;
}
#footerIcon{
  height:90px;
  padding:0 17px;
  position:relative;
  top:-22px;
}
#footerIcon img{
  height:100%;
  width:auto;
}
#footerIcon div{
  display:inline-block;
  position:absolute;
  top:37px;
}
.footerSocialMediaIcon{
  float:left;
  height:50px;
  margin-left:8px;
  width:50px;
}
.footerSocialMediaIcon img{
  height:auto;
  width:100%;
}
.footerText{
  font-size:12pt;
}
.footerTitle{
  font-size:12pt;
  font-weight:bold;
}
.form{
  color:#222;
}
.formContainer{
  display: block;
  text-align:left;
  vertical-align:top;
}
.formFile{
  cursor:pointer;
  float:left;
  margin:7px 15px;
  text-align:center;
}
.formFile:hover .formFileName{
  background:#CCC;
  color:#000;
}
.formFileName{
  background:none;
  color:#777;
  font-size:8pt;
  padding:0 2px;
}
.formFileNameSelected{
  background:#36B;
  color:#FFF;
  font-size:8pt;
  padding:0 2px;
}
.formTextArea{
  resize:none;
  width: calc(100% - 6px);
  max-width: 994px; /*Not 1000px due to Chrome being Chrome*/
}
.formTextError{
  color: #F00;
  font-size: 16px;
  display: inline-block;
}
.formWide{
  background-color: unset;
  border: none;
  border-radius: 0;
  color:#222;
  margin: auto 5%;
  padding: 0;
  width: 90%;
}

.formWideExtended{
  max-width:2000px;
  width: 90%;
  margin: auto
}
.formWideExtendedInventoryReport{
  width: calc(100vw - 10%);
  max-width:2000px;
  margin:auto
}
.formResourceFrame{
  display:none
}
.formButtons{
  /*border-top:1px solid #ddd;
  padding-top:15px;*/
  margin-top: 10px;
  text-align:left
}

.formButtons .button4{
  margin-left: 0;
  margin-right: 6px;
}
.formProperty{
  margin-bottom:7px;
}
.formPropertyLabel{
  display:block;
  font-weight:bold;
  margin-top: 5px;
  vertical-align:top;
  width: 100%;
}
.formPropertyValue{
  display:inline-block;
  width:74%;
}
.formResourceFrame{
  display:none;
}
.formSection h3{
  margin-top: 0;
}

.formSectionBreak{
  border-top:1px solid #ddd;
}
.formSectionInstructions{
  margin-bottom:20px;
}
.formSectionTitle, .pageTitle{
  font-size:28pt;
  line-height: 28pt;
  margin-bottom:20px;
}
.pageTitleDescription{

}

.formStatus{
  color: #009900;
  margin-top:13px;
}
.formSubmit{
  margin:0 3px 0 3px;
  min-width:67px;
}
.formTextInput{
  display: inline-block;
  width: 100%;
  max-width: 1000px;
}
#projectNotes{
  max-width: 994px;
  resize:none;
}

.generatedQRTable{
  max-height:300px;
  overflow-y:auto;
  width:777px;
}
.helpDocHeader{
  color:#009900;
  text-decoration:none;
}
.headerSort{
  cursor:pointer;
  top:0;
  position:sticky;
  background-color: #fff;
  padding-top: 3px;
}
#htmlContent{
  padding: 20px 30px 30px;
}
#htmlContentShadow{
  background:linear-gradient(to top, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.4) 100%);
  height:10px;
  position:relative;
  width:100%;
}
input,select{
  box-sizing:border-box;
  height:31px;
  max-width: 1000px;
  padding:5px;
  width: 100%;
}
input[type="radio"], input[type="checkbox"]{
  height:auto;
  width: auto;
}
.imageFullWidth{
  margin-top:180px;
}
.imageFullWidth img{
  height:auto;
  width:100%;
}
img{
  max-width:100%;
}
#info{
  display:none;
  /*position:fixed;
  top:10px;*/
  width:100%;
  text-align:right;
  z-index:11;

  position:absolute;
  top:0;
  left:200px
}
.loading{
  background:#fff;
  bottom:0;
  left:0;
  opacity:0;
  pointer-events:none;
  position:fixed;
  right:0;
  top:0;
  transition:opacity 0.5s ease-in;
  z-index:13;
}
.loadProfileTable{
  width:674px;
  border:1px solid black;
}
.loadProfileTableHeader{
  width:674px;
  background-color:#CCC
}
.loadProfileTableHeaderCol{
  width:140px;
  text-align:center;
  font-weight:bold;
  display:inline-block;
  /*border-top: 1px solid black;*/
  border-right: 1px solid black;
  margin-right:-3px;
}
.loadProfileTableRowColumn{
  /*font-family:Arial, Helvetica, sans-serif;*/
  display:inline-block;
  height:20px;
  width:140px;
  border-top:1px solid black;
  /*border-left:1px solid black;*/
  text-align:center;
  margin-right:-3px;
}
.loadProfileTableRowColumn input{
  height:20px;
  text-align:center;
  width:50px;
  font-family: 'Effra Light', serif;
}
.loadProfileTableRow{
  /*border-right:1px solid black;*/
  /*border-top:1px solid black;*/
}
.loadingAnimation{
  display:none;
  margin-bottom:20px;
  text-align:center;
}
.loadingShow{
  opacity:1;
}
.loadingSmallPrint{
  font-size:12pt;
  margin-top:20px;
}
.loadingText{
  color:#7f7f7f;
  height:240px;
  font-size:28pt;
  left:50%;
  margin-left:-150px;
  margin-top:-120px;
  position:absolute;
  top:50%;
  text-align:center;
  width:300px;
}
#login{
  background:linear-gradient(to bottom right, rgba(125,187,64,1) 0%, rgba(40,155,68,1) 100%);
  border-radius:8px;
  color:#fff;
  cursor:pointer;
  font-size:14pt;
  padding:1px 7px 1px 7px;
  position:absolute;
  right:20px;
  top:14px;
}

.loginPopup{
  animation:loginFade 2s;
  background:#fff;
  border-radius:8px;
  box-shadow:0 0 10px #333;
  color:#7f7f7f;
  opacity:0;
  padding:17px;
  pointer-events:none;
  position:absolute;
  right:10px;
  top:85px;
  transform:perspective(600px) rotateY(90deg);
  transition:transform 0.2s ease-in;
  width:400px;
  z-index: 999;
}
#loginPopup input{
  font-size:12pt;
  margin-top:20px;
  width:350px;
}
#loginPopupButtons{
  margin:33px 0 11px 0;
}
#loginPopupCallout{
  height:29px;
  position:absolute;
  right:215px;
  top:-20px;
  width:50px;
}
#loginPopupButtons span{
  min-height: unset;
}

#loginPopupCallout img{
  height:100%;
  width:auto;
}
#loginPopupClose{
  cursor:pointer;
  font-size:18pt;
  position:absolute;
  right:17px;
  text-shadow:none;
  top:12px;
  transition:text-shadow 0.2s ease-in;
}
#loginPopupClose:hover{
  text-shadow:0 0 3px #888;
}
#loginPopupDescription{
  font-size:14pt;
  margin:14px 0;
  text-align:left;
}
.loginPopupShow{
  opacity:1;
  pointer-events:auto;
  transform:perspective(600px) rotateY(0deg);
}
#loginPopupTitle{
  font-size:18pt;
  text-align:left;
}
#logo{
  cursor:pointer;
  height:40px;
  left:25px;
  position:fixed;
  top:7px;
  width:220px;
  z-index:12;
}
#logo img{
  height:100%;
  width:auto;
}
.materialLists{
  background-color:#fff;
  border:1px solid #ccc;
  overflow-y:scroll;
  height:160px;
}
.materialTable{
  height:286px;
  overflow-y:scroll;
  background-color:#fff;
  border: 1px #AAA solid
}
#menuAccentBottom{
  background:#888;
  bottom:0;
  height:1px;
  position:absolute;
  width:100%;
}
#menuAccentTop{
  background:#AAA;
  top:0;
  height:1px;
  position:absolute;
  width:100%;
}
#menuBar{
  bottom:35px;
  height:55px;
  position:absolute;
  text-align:center;
  width:100%;
}
#menuBarBackground{
  background:#e5e5e5;
  height:100%;
  position:absolute;
  width:100%;
}
#menuBar .fade{
  background:linear-gradient(to bottom, rgba(255,255,255,0.2) 11%, rgba(0,0,0,0.2) 100%);
  height:100%;
  position:absolute;
  top:0;
  width:100%;
}
#menuBar .highlight{
  background:#fff;
  height:50%;
  opacity:0.2;
  pointer-events:none;
  position:absolute;
  top:0;
  width:100%;
}
.menuItem{
  color:#7f7f7f;
  cursor:pointer;
  display:inline-block;
  font-size:26pt;
  padding-top:7px;
  width:15%;
}
.menuItem:hover{
  color:#000;
}
.menuItemSelected{
  color:#000;
  cursor:pointer;
  display:inline-block;
  font-size:26pt;
  padding-top:7px;
  width:15%;
}
#menuText{
  background:none;
  height:100%;
  margin:auto;
  padding: unset;
  position:absolute;
  text-align:center;
  width:100%;
}
.mobileTD{
  background-color:#777;
  color:#FFF;
  font-weight:bold
}

.navigationBar{
  background:linear-gradient(to bottom, rgba(90,90,90,1) 0%, rgba(111,111,111,1) 40%);
  bottom:0;
  height:35px;
  position:absolute;
  width:100%;
  transition: all .4s ease-in-out;
}
.navigationBarItem{
  background:#3b4151;
  border:0 solid #777;
  border-radius:8px;
  color:#fff;
  cursor:pointer;
  float:left;
  font-size:14pt;
  padding:1px 7px 1px 7px;
  margin:6px 0 4px 20px;
}
#newComment{
  resize:none;
  width:100%;
  max-width:100% !important;
}
.newCommentContainer{
  margin-top: 10px;
  margin-bottom: 13px;
}
.orderPartList td{
  word-break: break-word
}
.theadCenter tr{
  text-align:center;
}

/*#packageParts{
  width: calc(50% - 40px);
}*/

.packagePartsColumn{
  width:160px;
}
.packageQuantity{
  width:52px;
}
.packageTag{
  width:100px;
}

#packingSlipFiles tr>td:nth-child(1){
  padding-right: 10px;
  text-align: left;
}
#packingSlipFiles tr>td:nth-child(2){
  text-align: center;
}

.partsSearch{
  border-radius: 8px;
  display: inline-block;
  max-width: 850px;
  text-align: left;
  vertical-align: top;
  width: 100%;
}

.orderPartTable{
  width: 1800px;
  overflow-y: hidden;
  /* height:100%; */
  height:auto;
  table-layout: fixed;
  border: none;
}
.plantLinks{
  color:#000;
  text-decoration:none
}
.plantConfigurations{
  margin-bottom:60px;
  margin-top:40px;
}
.plantConfigurationButtons{
  margin-top:3px;
  text-align:right;
}
.plantConfigurationCurrent{
  float:right;
  width:45%;
}
.plantConfigurationExisting{
  float:left;
  width:45%;
}
.plantConfigurationSelect{
  height:100px;
  width:100%;
}
.projectScopePartHeader div{
  display: inline-block;
  font-weight:bold
}
.projectScopePart{
  margin-bottom:5px;
}
.projectScopePart div{
  display: inline-block;
}
.projectScopePartPrice div{
  display: inline-block;
}

.projectScopePartPriceName{
  width:300px;
  display:inline-block
}
.projectScopePartPriceCost{
  max-width:90px;
  text-align:right;
  display:inline-block;
  background-color:#f9f9f9;
  font-weight:bold;
}/*
.purchaseOrderReviewHeader tr>th:nth-child(1){
  width: 140px;
}
.purchaseOrderReviewHeader tr>th:nth-child(2), .purchaseOrderReviewHeader > tr:nth-child(3), .purchaseOrderReviewHeader > tr:nth-child(4), .purchaseOrderReviewHeader > tr:nth-child(5){
  width: 180px;
}
.purchaseOrderReviewHeader tr>th:nth-child(6){
  width: 200px;
}*/

.partCategoryGroupTitle{
  margin-top: 21px;
}

.partCategoryItem a{
  font-weight: normal;
}
.formTextInputSearchResults{
  background-color: #FFF;
  height: 100%;
  max-height: 200px;
  overflow-y: auto;
}

#replenishOnly{
  height: 25px;
  width: 25px;
}
.restrictedBox{
  background:#f9f9f9;
  border:1px solid #ddd;
  border-radius:8px;
  color:#7f7f7f;
  display:inline-block;
  margin:20px;
  padding:20px;
  text-align:left;
  vertical-align:top;
  width:500px;
}
.searchPartNumber{
  width:138px;
  white-space: pre-line;
  word-wrap: break-word;
}
#searchResults{
  overflow-y:scroll;
}
.searchRow{
  width:250px;
  text-align:left;
  display:inline-block
}
.sectionBox{
  background:#f9f9f9;
  border:1px solid #ddd;
  border-radius:8px;
  color:#7f7f7f;
  display:inline-block;
  height:360px;
  margin:20px;
  padding:20px;
  text-align:left;
  vertical-align:top;
  width:320px;
}
.sectionBoxes{
  margin-bottom:60px;
  position:relative;
  width:auto;
}
.sectionBoxText{
  color:#7f7f7f;
  font-size:14pt;
  line-height:24px;
}
.sectionBoxTitle{
  color:#7f7f7f;
  font-size:28pt;
}
.sectionContent{
  margin: 0;
  padding: 0;
  width: 100%;
}
.sectionContentCenter{
  text-align:center;
}
.sectionDivider{
  margin-top:10px;
  border-bottom:1px solid #888;
}
.sectionText{
  font-size:18pt;
  line-height:30px;
}
.sectionTitle{
  font-size:60pt;
  margin-top:90px;
}
.service{
  background:#f9f9f9;
  border:1px solid #ddd;
  border-radius:8px;
  color:#7f7f7f;
  display:inline-block;
  height:220px;
  margin:20px;
  margin-left:190px;
  padding:20px;
  position:relative;
  text-align:left;
  vertical-align:top;
  width:850px;
}
.serviceButton{
  float:left;
  height:100%;
  padding-top:87.5px;
}
.serviceImage{
  background:#eee;
  border-radius:6px;
  float:left;
  height:100%;
  overflow:hidden;
  width:220px;
}
.serviceInfo{
  float:left;
  margin:0 20px;
  position:relative;
  width:540px;
}
.serviceRight{
  margin-right:190px;
  text-align:right;
}
.services{
  margin-top:60px;
  position:relative;
  text-align:center;
  width:auto;
}
.serviceText{
  display:inline-block;
  font-size:14pt;
  padding:0;
  padding-top:-20px;
  vertical-align:top;
}
.serviceTitle{
  display:inline-block;
  font-size:28pt;
}
#sideMenu {
  background-color: #FFF;
  border: 1px solid #FFF;
  border-radius: 8px;
  box-shadow: 20px 16px 20px #888;
  display: none;
  font-size: 20px;
  grid-auto-columns: auto;
  grid-auto-rows: auto;
  margin: 10px 10px 0 10px;
  overflow-wrap:break-word;
  position: absolute;
  text-align: left;
  width: max-content;
  max-height: 600px;
  height: fit-content;
  overflow: auto;
  z-index: 1;
}

#sig-canvas {
  border: 1px solid black;
  border-radius: 5px;
  cursor: crosshair;
}
#sig-dataUrl {
  width: 100%;
}
#socialMedia{
  height:40px;
  position:absolute;
  right:25px;
  top:12px;
}
.socialMediaIcon{
  float:right;
  height:30px;
  margin-left:3px;
  right:25px;
  width:30px;
}
.socialMediaIcon img{
  height:auto;
  width:100%;
}
.stockSummary td{
  min-height:31px;
}
.stockSummaryDate{
  white-space: nowrap;
}
.stockSummaryHeader{
  position:sticky;
  background-color:#000;
  top:1px;
}
.tableOutline{
  background: #FFF;
  border-radius: 8px;
  box-shadow: inset 0 0 8px 5px #cccccc;
  padding: 20px;
  width: calc(100% - 40px);
  overflow: auto;
}
.tableOutlineSmall{
  max-width: 960px;
  width: calc(100% - 40px);
}
.tableTest table {
  width: 100%;
}
.tableTest thead, .tableTest tbody, .tableTest tr, .tableTest td, .tableTest th {
  display: block;
}

.tableTest tr:after {
  content: ' ';
  display: block;
  visibility: hidden;
  clear: both;
}
.tableTest thead th {
  height: 30px;
}

.tableTest tbody {
  height: 120px;
  overflow-y: auto;
}
.tableTest tbody td, .tableTest thead th {
  width: 19.2%;
  float: left;
}

#updateButton, #removeButton {
  display: none
}
#vendorCheckList{
  background-color:#FFF;
  height: 100%;
  max-height:200px;
  overflow-y:auto;
}

table{
  border:1px solid #777;
  width:100%;
}
td{
  background:#EEE;
  color:#111;
}
th{
  background:#777;
  color:#FFF;
  padding:0 5px;
}

.inventoryReport{
  display: block;
  overflow: auto;
  max-height: 500px;
  border: 1px solid black;
}

.inventoryReport table{
  border-collapse: collapse;
  border: none;
}

.inventoryReport tr{
  border: none;
}

.inventoryReport tr{
  width: 100%;
}

.inventoryReport tbody>tr:nth-child(odd)>td{
  background-color:#FFF;
}

.inventoryReport tbody>tr:nth-child(odd):hover>td{
  background:#DDD !important;
  color:#111 !important;
}

.inventoryReport colgroup>:nth-child(1){
  min-width: 100px;
  width:auto
}

.inventoryReport colgroup>:nth-child(2){
  min-width: 300px;
  width:auto
}

.inventoryReport colgroup>:nth-child(3), colgroup>:nth-child(4), colgroup>:nth-child(5){
  width: 100px
}

.inventoryReport colgroup>:nth-child(6){
  width: 120px
}
.inventoryReport colgroup>:nth-child(7){
  width: 120px
}
.inventoryReport colgroup>:nth-child(8){
  width: 80px
}

.irPart{
  padding-left: 5px;
  text-align: left
}

.irDescription{
  text-align: left;
}

.irQuantity{
  text-align: center;
}

.irAutoReplenish{
  border-left: 1px solid white;
  text-align: center;
}

.irPO{
  border-left: 1px solid white;
  text-align: center;
}

.irLocation{
  border-left: 1px solid white;
  padding-left: 5px;
  text-align: left;
}

.autoReplenishButton{
  background-color: #9D9D9D;
  border-radius: 20px;
  cursor:pointer;
  height: 25px;
  width:25px;
  margin: 0 auto;
}

.autoReplenishButton img{
  margin: 0 auto;
  height: 15px;
  padding: 5px;
}

.autoReplenishButton:hover{
  box-shadow:0 0 12px #888888;
}

.autoReplenishButtonActive{
  background-color: #4BACC6;
}

.autoReplenishButton:active{
  background-color: #F00;
}

#inventoryTable{
  border-collapse: collapse;
}

.titleHeading{
  text-align:center;
}

[tooltip]:before {
  position : absolute;
  content : attr(tooltip);
  opacity : 0;
}
[tooltip]:hover:before {
  opacity : 1;
  background-color:#090;
  border-radius: 6px;
  color:#fff;
  padding:10px;
  z-index: 9999;
  white-space:nowrap;
}
.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 240px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}

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

#userContent{
  margin: 20px 5%;
  height: fit-content;
}
#userList{
  color:#222;
  text-align: left;
  vertical-align: top;
}

#existingUsers{
  .formProperty a{
    font-weight: normal;
    padding: 20px;
  }

  .formProperty.selectedUser{
    font-weight:bold;
    background-color: #00F;
    a{
      color: #FFF;
    }
  }
}

#existingProjects{
  .formProperty a{
    font-weight: normal;
  }
  .formProperty{
    padding: 0 20px 2px 20px;
  }

  .formProperty.selectedProject{
    font-weight:bold;
    background-color: #00F;
    a{
      color: #FFF;
    }
  }
}

.adminDivider{
  border-left: unset;
  border-top: 1px solid #AAA;
  display: block;
  height: 1px;
  margin: 20px 0 15px 0;
  max-height: unset;
  min-height: unset;
  width: 100%;
}

.vendorAdminDivider{
  height: 1009px;
}

.manufacturerAdminDivider{
  height: 833px;
}

.projectAdminDivider{
  height: 894px;
}

.userListBreak{
  height: 6px;
}
.userListDisplay{
  background-color:#FFF;
  border:1px solid #767676;
  border-radius:3px;
  height:130px;
  max-width: 1000px;
  overflow-y:auto;
  width: calc(100% - 2px);
}

.propertiesForm{
  /* background-color: #FFF;*/
  /* border: 1px solid black;*/
  border-radius: 8px;
  display: inline-block;
  text-align:left;
  vertical-align:top;
  width: 100%;
}

#vendorList{
  background-color:#fff;
  border:1px #eee solid;
  height:100%;
  max-height:140px;
  min-height:120px;
  overflow-y:auto;
}
#welcomePopupBackground{
  background:#000;
  height:100%;
  opacity:0.5;
  position:absolute;
  width:100%;
}

.white{
  color:#fff;
}


ul.leaders {
  max-width: 80em;
  padding: 0;
  overflow-x: hidden;
  list-style: none}


ul.leaders li:before {
  float: left;
  width: 0;
  white-space: nowrap;
  content:
          ". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . "
          ". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . "
          ". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . "
          ". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . "}
ul.leaders span:first-child {
  padding-right: 0.33em;
  background: #f9f9f9;
  text-align:right}
ul.leaders span + span {
  float: right;
  padding-left: 0.33em;
  background: #f9f9f9}



/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: hidden; /* 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/Box */
.modal-content {
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 8px;
  color: #7f7f7f;
  margin: 20% auto;
  padding: 5px 10px 10px 10px;
  width: 670px;
}

/* The Close Button */
.closeModal {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  padding-right: 10px;
  background: none;
  border: none;
  z-index: 1;
  position: relative;
}

.closeModal:hover,
.closeModal:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

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

.modal-POReview-content {
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 8px;
  color: #7f7f7f;
  height: 100%;
  max-height: 80%;
  margin: 7% auto;
  max-width: 90%;
  padding: 5px 10px 10px 10px;
  width: 1790px
}
.inventoryReportGridContainer {
  display: grid;
}

.modal-POReview-content h1, h4{
  color: #000;
}

.modalMedium{
  margin: 10% auto;
  max-height: 60%;
}

.modalPopupSmall {
  background-color: #FFF;
  border-radius: 8px;
  padding: 20px;
  padding-top: 0;
  container-type: normal;
}
#modalPopup{
  position: fixed;
  top: 300px;
  left: calc(50% - 218px);
}

@media screen and (max-width: 740px) {
  .modalPopupSmall{
    width:80%;
    max-height: 80%;
  }


  .closeModal{
    font-size: 36px;
    padding-right: 10px;
    padding-top: 10px;
  }

  .formPropertyValue{
    width: 100%;
  }
  .userListDisplay{
    height: 50px;
    overflow-y: auto;
    border: 1px solid black;
  }
}

#poViewer {
  height: calc(100% - 4px);
  width: calc(100% - 4px);
}

.modal-FileViewer {
  width:60%;
  height: calc(100% - 50px);
  display:inline-block;
}

.modalData{
  max-height: 99%;
  height: 100%;
  width: 100%
}
.modalComments {
  display:inline-block;
  height: calc(100% - 50px);
  width:710px;
  vertical-align:top
}

.modalCommentButtons{
  height: 50px;
  padding-bottom:10px;
  margin-left:4px;
  text-align:center;
  width:100%
}

/*.modalCommentButtons button{
padding: 4px 4px 8px 4px;
}*/

#commentList {
  height: calc(100% - 187px);
  overflow-y: auto;
  vertical-align:top;
  width:100%;
}

.modalCommentButtons div{
  padding-bottom:5px;
}

.button4{
  border:none;
  padding: 8px;
  /*padding-top:4px;*/
}

.modalHeader{
  font-size:16px;
}

.modalHeader h3{
  display: inline-block;
  margin-bottom: 0;
  margin-top: 10px;
  padding-right:10px;
}

.modalHeaderLeft{
  color: #7f7f7f;
  display:inline-block;
  text-align:left;
  width:39%;
}

.modalHeaderCenter{
  display:inline-block;
  text-align:center;
  width:19%;
}

.modalHeaderRight{
  text-align:right;
  display:inline-block;
  width:39%
}

.modalHeaderRight h3{
  text-align:left;
}

@media screen and (max-width: 1400px) {

  .button4{
    font-size:12pt;
    padding-top:6px;
  }

  .modalHeader h3{
    margin-block-start: 0;
    margin-block-end: 0;
    display: block;
  }

  .modalHeaderLeft{
    width:34%;
  }

  .modalHeaderCenter{
    vertical-align: top;
    width:34%;
  }

  .modalHeaderRight{
    text-align: left;
    width:29%
  }
}

@media screen and (max-width: 600px) and (orientation: portrait){

  #vendorCheckList{
    max-width: 100%;
  }

  .loginPopup{
    right: unset;
    top:117px;
    width:80%;
    margin:0 5%;
  }
  #loginPopupCallout{
    right:calc(50% - 25px);
  }

  #loginPopupUsername, #loginPopupPassword{
    max-width: 90%;
  }

  .sectionTitle{
    font-size: 42pt;
  }

  #sideMenu{
    grid-template-areas: 'a';
    text-overflow: ellipsis;
    max-width: 100%;
  }

  .button4{
    font-size:20px;
    padding: 6px 10px 36px 10px;
  }

  .closeModal {
    font-size: 40px;
  }

  .modal-POReview-content{
    margin-top: 10%;
    margin-bottom: 5%;
    height: 90%;
  }

  .modalHeader{
    font-size:16px;
  }

  .modalHeader h3{
    margin-block-start: 0;
    margin-block-end: 0;
  }

  .modalHeaderLeft{
    display:block;
    width:80%;
  }

  .modalHeaderCenter{
    display:block;
    text-align:left;
    width:80%;
  }

  .modalHeaderRight{
    text-align:left;
    display:block;
    width:80%
  }

  .modal-FileViewer {
    width:100%;
    height: 50%;
  }

  .modalComments{
    width: 100%;
    height: calc(50% - 200px);
    font-size:30px;
  }

  #commentList{
    height: calc(100% - 208px);
  }

  #newComment{
    height: 71px;
  }

}

.poReviewComment {
  background-color:#FFF;
  border-radius:8px;
  margin:10px 10px 3px 10px;
  padding: 5px;
}

.poReviewCommentSection{
  display:inline-block;
  font-weight:bold;
  width:49%;
}

.poReviewCommentSectionLeft{
  text-align:left;
}

.poReviewCommentSectionRight{
  text-align:right;
}

#commentHolder {
  border-radius: 8px;
  background-color: #e9e9e9;
  border: 1px solid #ddd;
  margin-left:5px;
  transition:box-shadow 0.3s ease-in;
}

.buttonRound:hover{
  box-shadow:0 0 12px #888888;
}

#partSearchResults{
  width: 100% !important;
  background-color: #FFF;
  border: 1px solid #000;
  max-height: fit-content;
  /*min-height: 30.2px; */
}

.procurementOrderPartsTable{
  border: none;
}

.procurementOrderPartsTable th{
  text-align: center;
}

.procurementOrderPartsTable input[type=number]{
  text-align: center
}

.procurementOrderPartsTable colgroup>:nth-child(1){
  width: 22px
}
.procurementOrderPartsTable colgroup>:nth-child(2){
  width: 168px
}
.procurementOrderPartsTable colgroup>:nth-child(3){
  width: 180px
}
.procurementOrderPartsTable colgroup>:nth-child(4){
  width: 80px
}
.procurementOrderPartsTable colgroup>:nth-child(5){
  width: 100px
}
.procurementOrderPartsTable colgroup>:nth-child(6), colgroup>:nth-child(8){
  width: 200px
}
colgroup>:nth-child(7){
  width: 130px
}

.summaryTableCell{
  padding:0 5px;
}
/*
.procurementSummaryTable select{
  width: 100%;
}
/*
.procurementSummaryTable tr>th:nth-child(1){
  width: 78px;
}
.procurementSummaryTable tr>th:nth-child(2), .procurementSummaryTable tr>th:nth-child(5), .procurementSummaryTable tr>th:nth-child(8){
  width: 150px;
}
.procurementSummaryTable tr>th:nth-child(3){
  width: 120px;
}
.procurementSummaryTable tr>th:nth-child(4), .procurementSummaryTable tr>th:nth-child(6), .procurementSummaryTable tr>th:nth-child(7){
  width: 388px;
}*/

.procurementSummaryTableCellBad{
  background-color: rgba(255, 0, 0, 0.35) !important;
  border-bottom: 1px solid #AAA;
  color: #000 !important;
}

.procurementReview{
  display:inline-block;
  margin-bottom:5px;
  padding-top:5px;
  text-align:right;
}

.stickyTable table{
  border-collapse: collapse;
}

.stickyTable thead{
  box-shadow: 0 0 0 2px #e8e8e8;
  border-bottom: 1px solid #e8e8e8;
  border-top: 1px solid black;
  position: sticky;
  text-align: center;
  top: 0;
}

.procurementReview tr{
  text-align: center;
}

.orderPartsTableContainer{
  padding:0; overflow-x:auto; width:99.3%; border:1px solid; max-height:800px; height:auto; overflow-y:auto
}

.addPOPart td:nth-child(n+2){
  display:none; /*This is the hidden sub-properties*/
}

tr{
  height:31px;
}
tr:hover td{
  background:#DDD;
  color:#111;
}

.sortRow{
  height: 18px;
  margin-top: 1px;
  font-size: 12px;
}

#projectFilterList{
  background-color: #FFF;
  border: 1px solid #767676;
  border-radius: 3px;
  max-height: 200px;
  overflow-y: auto;
  max-width: 997px;
}

#projectFilterList input{
  height: auto;
}

#projectFilterList div{
  margin: 0 auto;
  height: auto;
}


/* NEW STUFF!
*/
@font-face{
  font-family: "Effra Light";
  src: url('fonts/effra-light-webfont.ttf');
}
a{
  color: #000000;
  text-decoration: none;
}
.address{
  margin: 20px 0;
}
#anniversaryBadge{
  display: inline-block;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 1px;
  margin-top: 40px;
  text-align: center;
}
#anniversaryBadge img{
  height: 120px;
  width: 120px;
}

.button{
  background: linear-gradient(to bottom right, rgba(125,187,64,1) 0%, rgba(40,155,68,1) 100%);
  border-radius: 8px;
  color: #ffffff;
  font-size: 20px;
  display: inline-block;
  margin: 7px 0;
  padding: 16px 32px;
}
.checkmark{
  background: #58595B;
  border-radius: 24px;
  color: #ffffff;
  font-size: 36px;
  display: inline-block;
  height: 50px;
  text-align:center;
  width: 50px;
}
.companyStatement{
  margin: 30px 20% 0 20%;
}
.contact{
  margin: 20px 0;
}
.continualIconBackground{
  /*background-image: url("continualIconBackground.png");*/
  background-position: top right;
  background-repeat: no-repeat;
  background-size: 50%;
  text-align: left;
}

#contractorCheck img{
  height: 100px;
  width: 100px;
}
.copyright{
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
  padding: 10px 0;
  text-align: center;
}
.footer{
  background: #000000;
  color: #ffffff;
}
.footer a{
  color: #ffffff;
}
.footerItem{
  align-content: baseline;
  display: grid;
  margin: 30px 60px 30px 0;
  min-width: 320px;
  vertical-align: top;
  width: fit-content;
}
.footerItemTitle{
  font-size: 25px;
  font-weight: 600;
  letter-spacing: 4px;
  line-height: 34px;
  text-transform: uppercase;
}
.footerItems{
  margin: 0 5%;
  padding: 30px 0;
  text-align: left;
  display: grid;
  grid-row-gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
#footerLogoImage{
  height: 50px;
}
.footerLogos{
  display: grid;
  text-align: center;
  justify-content: center;

}
#headerLogo{
  float: left;
  margin-left: 5%;
  width: 100%;
  max-width:278px;
}
#headerLogoImage{
  height: 50px;
  padding-top: 22px;
}
#menu{
  line-height: 25px;
  text-align: center;
}
.menuText{
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 1px;
  margin-left: 20px;
}
.missionStatement{
  text-align: left;
}
.missionStatementText{
  padding: 20px 0;
  max-width: 50%;
}
.missionStatementTitle{
  font-size: 60px;
  line-height: 70px;
  margin-top: 150px;
}

.procurementReviewButton{
  margin-left: 8px;
}
.product{
  background: #58595B;
  border-radius: 24px;
  color: #ffffff;
  display: inline-block;
  justify-content: center;
  max-width: 380px;
  margin: 30px;
  min-height: 200px;
  overflow: hidden;
  padding: 52px 36px;
  text-align: center;
  width: 100%;
}
.productIcon{
  align-items: center;
  display: inline-block;
  height: 100px;
  justify-content: center;
  margin-top: 30px;
  width: 100px;
}
.products{
  padding: 80px 0;
  text-align: center;
}
.productTitleText{
  font-size: 30px;
  font-weight: 700;
  line-height: 65px;
}
.productDescription{
  font-size: 16px;
  font-weight: 600;
  height: 100px;
  letter-spacing: 1px;
  line-height: 25px;
}
.project{
  display: inline-block;
  margin: 0 30px;
  max-width: 150px;
  min-height: 150px;
  overflow-x: auto;
  overflow-y: hidden;
  width: 150px;
}
.projects{
  padding: 80px 0 0 0;
  text-align: center;
}
.projectType{
  font-weight: 600;
  font-size: 16px;
  height: 100px;
  letter-spacing: 1px;
  line-height: 25px;
  margin-top: 20px;
}
.projectText{
  margin-bottom: 20px;
}
.section{
  padding: 2% 10%;
  text-align: center;
}
.sectionDark{
  background-color: #f7f7f7;
}
.sectionDiagonalBottom{
  background: rgb(247,247,247);
  background: linear-gradient(5deg, rgba(255,255,255,1) 50%, rgba(247,247,247,1) 50%);
  height: 200px;
  width: 100%;
}
.sectionDiagonalTop{
  background: rgb(247,247,247);
  background: linear-gradient(5deg, rgba(247,247,247,1) 50%, rgba(255,255,255,1) 50%);
  height: 200px;
  width: 100%;
}
.sectionLight{
  background-color: #ffffff;
}
.sectionTitleTextMedium{
  font-size: 45px;
  line-height: 100px;
}
.sectionTitleTextSmall{
  text-transform: uppercase;
  font-size: 35px;
}
.socialMediaLink{
  margin: 20px 0;
}
.teamMember{
  display: inline-block;
  max-width: 170px;
  margin: 10px;
  min-height: 275px;
  overflow: hidden;
  padding: 36px 10px 0 10px;
  text-align: center;
  width: 100%;
}
.teamMemberImage{
  background: #eeeeee;
  max-width: 170px;
  min-height: 150px;
}
.teamMemberImage img{
  max-width: 170px;
}
.teamMemberName{
  font-size: 20px;
  font-weight: 700;
  padding: 20px 0 6px 0;
}
.teamMembers{
  padding: 80px 0;
  text-align: center;
}
.teamMemberTitle{
  font-size: 16px;
  /*font-weight: 600;*/
  letter-spacing: 1px;
  line-height: 25px;
}
/*
@media only screen and (max-device-width: 1500px){
  .footer{
    font-size: 16px;
    line-height: 20px;
  }
  .footerItem{
   min-width: 250px;
   width: 250px;
   margin: 30px 30px 30px 0;
  }
  .companyStatement{
    margin: 30px 80px 0 80px;
  }		
}*/

@media only screen and (max-width: 765px) {
  .footerItems {
    grid-template-columns: 1fr;
    grid-auto-flow: unset;
  }
  .footerItem {
    margin: 0;
    min-width: unset;
  }

}

@media only screen and (max-device-width: 480px) {
  body{
    --width: 480px;
  }
  .footer{
    font-size: 22px;
    line-height: 25px;
  }
  .footerItem{
    margin-right: 0;
    width: 100%;
  }
  .footerLogos{
    float: none;
    display: inline-block;
    min-width: 250px;
    width: 250px;
  }
  .missionStatementText{
    max-width: 100%;
  }
}


/****New Stuff I added!****/

.sectionTitle{
  font-size: 48px;
  line-height: 60pt;
  margin-left: 50px;
  margin-top:0;
  padding-top: 0;
}

.sectionText{
  margin-left:50px;
}
.headerNew{

}
.headerLoginPopup {
  background-color: #ffffff;
  box-shadow: 0 7px 8px #cccccc;
  font-size: 16px;
  height: 100px;
  position: fixed;
  top: 0;
  width: 100% !important;
  z-index: 100;
}


a{
  text-decoration: underline;
  font-weight: bold;
}

a:hover{
  color: #00F;
  transition: 0.15s all ease-in;
}

a:active{
  color: #6d6f71;
  transition: unset;
}

label{
  font-size: 18px;
}

table{
  border-collapse: collapse;
}

td{
  font-size:16px;
}

thead{
  display: table-header-group;
  vertical-align: middle;
  background-color: #000;
}

th{
  background-color: #777;
  color: #fff;
  font-size:16px;
  padding: 0 3px !important;
  text-align: center;
  position: sticky;
  top: 0;
  z-index: 2;
  /*These 2 rows fix the "bumping" action of the scroll*/
  box-shadow: 0 0 0 2px #e8e8e8;
  /*border-bottom: 1px solid #e8e8e8;
  border-top: 1px solid #e8e8e8;*/
  border-collapse: collapse;
}

tbody>tr:nth-child(odd)>td{
  background-color:#FFF;
  /*align-content: center;
  width: fit-content;*/
}

tbody>tr:nth-child(even)>td{
  /* width: fit-content;*/
}

tbody>tr:hover>td{
  background:#ddd !important;
  transition: 0.25s;
}
/*
table th:nth-child(1){
  border-left: none;
}

table tr:nth-child(1){
  border-left: none;
}

table th:nth-child(n+2), td:nth-child(n+2){
  border-left: 1px solid #aaa;
}*/

#inventoryTransferTable td:nth-child(7){
  text-align: center;
}

#inventoryTransferTable td:nth-child(8){
  text-align:right;
}

.inventoryTransferReport{
  display: block;
  overflow: auto;
  max-height: 500px;
  border: 1px solid black;
}

.inventoryTransferReport table{
  border-collapse: collapse;
  border: none;
}
.tableContainer{
  border: 1px solid black;
  display: block;
  overflow: auto;
  max-height: 500px;
  border-collapse: collapse;
}
.navigationBar{
  background: none;
  bottom: unset;
  height: 50px;
  margin-top: 120px;
  position: fixed;
  transition: all .4s ease-in-out;
  width: 100%;
  z-index: 5;
}
.navigationBarItem:nth-child(1){
  margin-left: 1%;
}
.navigationBarItem{
  margin: 4px 0;
}
.navigationBarItem:hover{
  color: #0A0;
  transition: 0.25s;
}
.navigationBarDivider{
  color: #FFF;
  float: left;
  height: 100%;
  margin: 2px 10px;
  text-align: center;
  vertical-align: middle;
}
.navigationBarDivider p{
  display: inline;
  font-size: 18px;
  vertical-align: middle;
}
#menu{
  height: calc(100% - 35px);
  width: auto;
}
#statusText{
  color: #f00;
  text-align: center;
}

.product{
  background: #58595B;
  border-radius: 24px;
  color: #ffffff;
  display: inline-block;
  justify-content: center;
  max-width: 380px;
  margin: 30px;
  min-height: 200px;
  overflow: hidden;
  padding: 52px 36px;
  text-align: center;
  width: 100%;
}

.sectionBox{
  /*border: none;*/
  background-color: #58595B;
  color: #FFF;
  height: auto;
  min-height: 300px;
  border-radius: 24px;
  border: none;
  box-shadow: 20px 16px 20px #888888;
}

.sectionBoxTitle{
  font-weight: bold;

  font-size: 18pt;
  color:#FFF;
  text-decoration: none;
  text-align: center;
}

.sectionBoxText{
  color:#FFF;
  padding-top: 10px;
}
.toolIcon{
  background-color: white;
  border: white solid 1px;
  border-radius: 5px;
  display: flex;
  float: left;
  height: 40px;
  justify-content: center;
  width: 40px;
}
.toolIcon img{
  align-items: center;
  display: flex;
  height: 34px;
  margin: auto;
  justify-content: center;
  text-align: center;
  vertical-align: middle;
  width: 34px;
}
.sectionBoxItem{
  color:#FFF;
  cursor: pointer;
  display: flex;
  font-weight: bold;
  height: 45px;
  margin: auto !important;
  vertical-align: middle;
}
.sectionBoxItem span{
  height: 100%;
  margin: auto 0;
  padding-left: 50px;
  vertical-align: middle;
}
.toolIcon ~ span{
  height: 100%;
  margin: auto 0;
  padding-left: 8px;
  vertical-align: middle;
}
#login{
  border: none;
  height: 32px;
  margin-right: 5%;
  margin-top: 0;
  right: 0;
  top: 34px;
}
#login:hover{
  color: #000;
  font-weight: bold;
  transition: 0.35s;
}
.sectionBoxItem:hover{
  color:#0a0;
  transition: 0.35s;
}
.sectionBoxItem:hover .toolIcon{
  background-color: #0A0;
  border-color: #0A0;
  /* rgb(125 187 64) */
  transition: 0.35s;
}
.sectionBoxItem:active span{
  color: #AAA;
  transition: 1s ease-out all;
}
.sectionBoxItem:active .toolIcon{
  background-color: #000;
  border-color: #000;
  transition: 1s ease-out all;
}
.toolIcon:active .sectionBoxItem span{
  color: #AAA;
  transition: 1s ease-out all;
}
.copyright{
  color: #FFF !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 20px !important;
  padding: 10px 0 !important;
  text-align: center !important;
}
footer{
  background: #000000 !important;
  color: #ffffff !important;
  width:100%;
  height: auto;
}
.footer a{
  font-weight: normal;
  text-decoration: underline;
}
.footerSection{
  display: inline-block;
  margin: 30px;
  min-width: 320px;
  vertical-align: top;
  width: 320px;
}
.footerItemTitle{
  font-size: 25px;
  font-weight: bold;
  letter-spacing: 4px;
  line-height: 34px;
  text-transform: uppercase;
}
.footerContentTitle{
  font-weight: bold;
}
#footerLogoImage{
  height: 50px;
}
.footerLogos{
  padding: 30px 0;
}
.restrictedBox{
  color: #000 !important;
}
.restrictedBox h3{
  text-align: center;
  margin-top: 0;
}
#detailsWindow{
  display: none !important;
  max-width:380px !important;
  width: 0 !important;
}
#estimateSummaryContent{
  padding-bottom:20px;
  margin-bottom: 0;
}

#userContent{
  height: fit-content;
  margin-bottom: 0;
  max-width: 1000px;
  padding-bottom: 20px;
  width: 100%;
}

#partList{
  .formProperty{
    padding: 0 20px 2px 20px;
  }
  .formProperty.selectedPart{
    font-weight:bold;
    background-color: #00F;
    a{
      color: #FFF;
    }
  }
}

#partCategoryList{
  .partCategoryItem{
    padding: 0 20px 2px 20px;
  }
  .partCategoryGroup{
    padding: 0 20px 2px 20px;
  }
  .partCategoryItem.selectedPart{
    font-weight:bold;
    background-color: #00F;
    a{
      color: #FFF;
    }
  }
}

.restrictedTitle{
  text-align: left;
}

.restrictedBoxContainer{
  text-align: center;
}

.formSidePanel{
  background: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 8px;
  color: #222;
  display: inline-block;
  margin-right: 10px;
  width: 230px;
  padding: 20px 0 20px 20px;
  text-align: left;
  vertical-align: top;
  height: 1343px;
}

#partProperties{
  display: inline-block;
  height: 1383px;
  text-align: left;
  vertical-align: top;
}

.existingUsersPanel{
  height: 717px;
  width: 400px;
}
.existingEntries{
  background: #FFF;
  border-radius: 8px;
  box-shadow: inset 0 0 8px 5px #cccccc;
  height: 100%;
  margin-top: 0;
  max-height: 300px;
  max-width: calc(100% - 10px);
  overflow: auto;
  padding: 20px 0px;
}

.existingVendors{
  max-height: 500px;
}

#BOMTableNew{
  width: 3998px;
}

#BOMTableNew td{
  text-align: center;
  width: auto;
}

#BOMTableNew td:nth-child(1){
  min-width: 250px;
}

#BOMTableNew td:nth-child(n+1){
  min-width: 275px;
}
.buttonMenuContainer{
  display: inline-block;
}
#qrCodeFiles{
  display: table-row-group;
}

#showMenu{
  margin-right: 10px;
}
.modalHeaderValue{
  color:#000;
  display: inline
}
.partSplitRowGrid {
  display: grid;
  grid-template-columns: 4.84fr 150px 150px 150px .285fr .47fr .58fr 1fr;
  grid-column: 1 / 15;
  height: fit-content;

}

@media only screen and (max-width: 900px){

  .adminDivider{
    width: 100%;
  }
  #existingEntries{
    max-width: 100%;
  }
  #existingUsers{
    max-width: 100%;
  }
  .formPropertyValue select{
    width: 100%;
  }
  .formTextArea{
    width: 100%;
  }

}


@media only screen and (max-width: 2000px){

  .modal-POReview-content{
    height: calc(100% - 60px); /*Chrome bug: should be 40px but using 60px to account for missapplication of width including padding bug*/
    margin: 20px;
    max-width: unset;
    padding: 10px;
    width: calc(100% - 60px); /*Chrome bug: should be 40px but using 60px to account for missapplication of width including padding bug*/

  }
  .modalData{
    max-height: 600px;
    overflow: auto;
  }

  .modal-FileViewer {
    max-height: 495px;
    max-width: 49.5%;
  }

  .modalComments{
    height: 495px;
    max-width: 49.5%;
    width: 100%;

  }
}


/***MOBILE***/
@media only screen and (max-width: 400px) and (orientation: portrait){

  .dropdownButton{
    max-width: unset;
    width: 20px;
  }

  .modalHeader{
    font-size:15px
  }

  #opShipToAddress option{
    width:150px;
  }

  .modalHeaderLeft h3, .modalHeaderRight h3, .modalHeaderCenter h3{
    font-size: 16px;
  }
  .modalHeader{
    height: 60px;
    /***overflow: auto; ***/
    width: 95%;
  }

  .modal-FileViewer{
    max-width: 100%;
    width: 100%;
  }
  .modal-POReview-content {
    max-height: unset;
    width: unset;
  }

  .modalComments{
    max-width: unset;
  }


  .poReviewComment{
    font-size: 16px;
  }

  .closeModal{
    font-size: 54px;
  }

  .modalHeaderValue{
    display: block
  }


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

  .poReviewCommentSectionRight{
    text-align:left;
  }
  .extraDivider{
    flex: 0 0 150px
  }
  .button4{
    height: auto;
    margin-bottom: 5px;
    margin-left: 0;
    padding-bottom: 4px;
    white-space: normal;
  }
  .documentButtons{
    width: 100%;
  }
  .documentList{
    max-width: 100%;
  }
  .summaryTable{
    max-width: 318px;
  }
  .existingManufacturers .existingVendors{
    max-height: 400px;
  }
  #searchResultsTable{
    max-width: 340px;
  }
  .formSection select {
    width: 100%;
  }

  .formTextArea{
    width: calc(100% - 6px);
  }
  .formSubmit{
    margin-bottom: 5px;
  }
  .userListDisplay{
    font-size: 18px;
    height: 104px;
    width: calc(100% - 2px);
  }
  #documentList{
    width: 100%;
  }
  #qrCodeFiles{
    display: none;
  }

  .existingUsersPanel{
    height: auto;
  }

  #existingProjects{
    max-height: 500px;
  }

  .footerLogos{
    float: unset;
    text-align: center;
  }

  #contractorCheck{
    margin-top: 35px;
    padding-bottom: 0;
    text-align: center;
    width: 100%;
  }

  #headerLogo{
    margin: 0;
    max-width: unset;
    text-align: center;
    width: 100%
  }

  #headerLogo img{
    max-width: unset;
  }

  #existingUsers{
    max-height: 320px;
  }

  #userProperties{
    margin: 0;
    /* width: calc(100% - 20px);*/
  }

  .restrictedTitle{
    text-align: center;
  }

  .sectionBox{
    margin-left: 10px !important;
    min-height: auto;
  }

  .sectionContent{
    padding: 0;
    width: calc(100% - 30px);
  }

  .sectionTitle{
    font-size: 38pt;
    margin-left: 10px;
    padding-top: 0;
  }
  .sectionText{
    font-size: 12pt;
    text-align: left;
    margin-left: 10px;
  }
  .sectionBox{
    width: 300px;
    box-shadow: none;
    margin-right: 0;
  }
  .sectionBoxTitle{
    font-size: 16pt;
  }
  .sectionBoxText{
    font-size: 12pt;
  }

  .contentDark{
    padding: 0;
    padding-top: 130px;
  }

  .footerItems{
    margin: 0;
    padding: 0;
  }

  .footerItem{
    margin-left: 30px;
    margin-bottom: 0;
    width: calc(100% - 30px) !important;
  }

  .footerLogos{
    margin: auto;
    width: 100%;
  }

  .restrictedBox{
    width: calc(100% - 60px);
    padding:10px;
    text-align: left;

  }

  #partSearch{
    width: calc(100% - 40px);
    margin:10px;
    padding: 10px;
  }

  .form{
    margin-top: 0;
    padding: 0;
  }


  .formSidePanel{
    width: calc(100% - 40px);
    height: 100%;
    margin: 0 10px;
    max-height: 500px;
  }
  .adminTitle {
    margin-top: 0;
  }

  #userContent{
    margin-top: 10px;
    width: calc(100% - 10%);
  }

  #partList{
    max-height: 285px;
    overflow-y: scroll;
  }

  #partProperties{
    margin: 10px;
    width: calc(100% - 20px);
  }

  .formSection h4{
    margin: 5px 0 0 0;
    font-size: 12pt;
  }

  .tableOutlineSmall{
    width: calc(100% - 40px);
  }

}







@media only screen and (max-width: 590px) and (orientation: portrait){

  .partNotListed {
    width: unset !important;
  }

  .buttonMenuContainer{
    display: none;
  }

  #headerLogo{
    margin: 0;
    max-width: unset;
    text-align: center;
    width: 100%;
  }

  #login{
    border: none;
    display: inline-block;
    margin: 0;
    position: static;
    right: unset;
    top: 60px;
    text-align: center;
  }

  #headerLogoImage{
    padding-top: 0;
    margin-top: 7px;
  }

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

  #headerLogoImage{
    overflow-x: hidden;
  }

  .sectionContent{
    padding: 0;
    width: calc(100% - 30px);
  }

  .contentDark{
    padding: 0;
    padding-top: 130px;
  }

  .footerLogos{
    float: none;
  }

  .sectionTitle{
    padding-top: 0;
  }

  #sideMenu{
    max-height: 400px;
    overflow: auto;
  }

}

@media only screen and (max-width: 1317px){
  .footerLogos{
    float: none;
  }
}


@media only screen and (orientation: portrait){
  .footerLogos{
    float: none;
    text-align: center;
    width: 100%;
  }
  #contractorCheck{
    text-align: unset;
    width:100%;
  }
}


/*Menu CSS*/
/*
.menuText{
  display: inline-block;
  position: relative;
  width: auto;
}

.menuLink{
  
  cursor: pointer;
  font-weight: normal;
  padding: 3px 15px;
}

.menuLink:hover{
  /*background-color: #F0F0F0;*/
/*  font-weight: bold;
}

.menuOptions{
  display: none;
  background-color: #FEFEFE;
  border: 1px solid #FEFEFE;
  border-radius: 10px;
  box-shadow: 20px 16px 20px #888;
  position: absolute;
  text-align: left;
  width: max-content;
  z-index: 1;
}

.menuSectionTitle{
  font-weight: bold;
}

.menuSectionTitle:hover ~ .menuOptions{
  display: block;
  transition: 0.3s;
}

.menuOptions:hover{
  display: block;
}
*/

#showMenu{
  margin-left: -20px;
  width: calc(5% + 50px);
  text-align: right;
}

#showMenu img{
  height: 36px;
  margin: 7px auto;
  opacity: 75%;
  width: 48px;
}

#showMenu:hover img{
  opacity: 100%;
}

.buttonMenu{
  background-color: white;
  border: 1px solid white;
  border-radius: 8px;
  box-shadow: 0 0 5px #888;
  display: inline-block;
  font-size: 23px;
  height: 50px;
  margin: auto 5px auto 0;

  padding: 0 16px;
  vertical-align: middle;
}

.buttonMenu:hover{
  color: #00F;
  cursor: pointer;

  text-decoration: underline;
}

.buttonMenu div{
  padding: 12px 0;
}
.menuText{
  display: inline-block;
  position: relative;
  width: auto;
}

.menuLink{
  cursor: pointer;
  font-size: 18px;
  font-weight: normal;
  padding: 8px 15px 0 15px;
}

.menuLink:hover{
  font-weight: bold;
}

.menuLinkDashboard{
  padding: unset;
}

.menuLinkHeader{
  padding: 8px 0 0 15px;
  margin-bottom: 0;
  margin-top: 5px;
  font-size: 18px;
}

.menuOptions{
  display: none;
  background-color: #FEFEFE;
  border: 1px solid #FEFEFE;
  border-radius: 10px;
  box-shadow: 20px 16px 20px #888;
  position: absolute;
  text-align: left;
  width: max-content;
  z-index: 1;
}

.menuSectionTitle{
  font-weight: bold;
}

.menuSectionTitle:hover ~ .menuOptions{
  display: block;
  transition: 0.3s;
}

.menuOptions:hover{
  display: block;
}

.dashboardContainer{
  color: #FFF;
  height: auto;
  margin: auto;
  min-height: 300px;
  padding: 20px 0;
  width: 100%;
}

.dashboardSection{
  align-content: baseline;
  background-color: #F7F7F7;
  border-radius: 8px;
  border: none;
  box-shadow: inset 0 0 8px 5px #cccccc;
  color: #FFF;
  display: inline-grid;
  height: auto;
  min-height: 300px;
  width: auto;
  overflow: auto;
}

.dashboardSectionLong{
  grid-column: 1 / 3;
  grid-auto-columns: 1fr;
}

.dashboardSectionTitle{
  color:#000;
  font-size: 18pt;
  font-weight: bold;
  padding: 20px 0 0 20px;
  text-align: left;
}

.dashboardSectionContent{
  background-color: #FFF;
  border: 1px solid black;
  color: #000;
  margin: 15px;
  text-align: left;
}

.dashboardSectionContent:has(.dashBoardLinks){
  background-color: unset;
  border: unset;
}


.formWideExtended{
  margin: auto 10%;
}

.formPropertyValue{
  width: 100%;
}

.formInstructions{
  font-size:12px;
  text-align:left;
}

.formInstructionsButtons > .button4{
  margin: 15px 5px 15px 0;
}

.procurementReview{
  text-align: left;
}

#uploadPO{
  margin: 0 0 10px 0;
}

.userListBreak{
  height: 6px;
}

.stickyTable{
  border: 1px solid black;
  overflow: auto;
  max-height: 500px;
  width: calc(100% - 2px);
  height: fit-content;
}

.orderPartsTableContainer{
  border: none;
}

#orderPartsTable{
  border: 1px solid black;
}

.generatedQRTable {
  border: 1px solid black;
  width: 100%;
}

#splitSection{
  display: none;
}
#transferSection{
  display: none;
}
.subSection{
  background: #FFF;
  border-radius: 8px;
  box-shadow: inset 0 0 8px 5px #cccccc;
  margin-top: 6px;
  padding: 10px;
  text-align: left;
  width: calc(100% - 6px);
}

.hideDisabledContainer{
  display: flex;
  align-items: center;
  height: 35px;
  margin-top: 4px;
  vertical-align: middle;
}

.hideDisabledContainer div{
  display: inline-block;
  padding-left: 5px;
  vertical-align: middle;
}
#hideDisabled{
  margin: 0;
  width: 30px;
}

.verticalTable{
  width: 100%;
}

.verticalTable a{
  color: #00F;
}

.verticalTableHeader{
  background-color: #777 !important;
  border-bottom: 1px solid #FFF;
  color: #FFF !important;
  font-weight: bold;
  padding-left: 3px;
  width: 100px;
}

#orderPartsTable input[type="date"]{
  width: 100%;
}

#orderPartsTable tbody:nth-child(odd){
  background-color: #FFF;
}

#orderPartsTable tbody:nth-child(even){
  background-color: #EEE;
}

.inventoryDateGrid {
  display: grid;
  grid-template-columns: 1fr 28px 1fr;
  max-width: 1000px;
}
.inventoryDateGrid  div{
  place-self: center;
}


[popover]{
  max-width: 90%;
  max-height: 90%;
  min-height: 50%;
  min-width: 50%;
  width: auto;
  height: auto;
  padding: 0 10px;
  border-radius: 10px;
  border: solid 1px #888;
}

.popoverContainer{
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: auto 9fr;
  /*border: 1px dashed grey;*/
  height: calc(100% - 40px);
  width: 100%;
  container-type:size;
  transition: all 1s ease-out;
}

.lowInventoryPop {
  max-height: 500px;
}
.popoverHeader{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 100%;
  /*border: 1px dashed black;*/
}

.inventoryButtonLink {
  background: none;
  border: none;
  cursor: pointer;

  font-weight: 700;
  font-size: 16px;
  text-decoration: underline;
}
.inventoryButtonLink:hover {

  color: blue!important;
}
#lowInventoryTable {
  grid-template-columns:
    minmax(auto, max-content)
    1000px
    repeat(5,180px)
    150px;

}
#partDetailsTable {
  grid-template-columns:
    repeat(5,450px);

}
#inventoryTable {
  grid-template-columns:
     minmax(max-content, auto)
     550px
     repeat(7, 200px);
}
.lowInventoryPopoverContainer {
  display: grid;

  grid-template-rows: auto 9fr;
  /*border: 1px dashed grey;*/
  height: calc(100% - 40px);
  width: 100%;
  container-type:size;
  transition: all 1s ease-out;
}
.lowInventoryPopoverHeader {
  container-type: size;
}
.popoverHeader h3{
  color: #7f7f7f;
  margin: 0;
}

.poNewCommentContainer{
  background-color: #e9e9e9;
  border-bottom-right-radius: 10px;
}

.poNewComment{
  border-radius: 10px;
  background-color: #fff;
}

.popoverHeader span{
  color:#000;
}

.popoverContent{
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  /*border: 1px dashed green;*/
  max-height: 100%;
}

.popoverData{
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

.popover-FileViewer {
  height: 100%;
  width: 100%
}



.poComments{
  height: inherit;
  container-type:size;
  display: grid;
  grid-template-rows: 1fr auto auto;
  grid-template-columns: 100%;
}

#commentList{
  background-color: #e9e9e9;
  border-top-right-radius: 10px;
  overflow-y: auto;
  height: auto;
  container-type:size;
}
#chatTexts div{
  border: 1px solid black;
}

.submitButtons{
  background-color: #fff;
  bottom: 0;
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  padding: 5px 15px;
  grid-row-gap: 5px;
  grid-column-gap: 5px;
}

.submitButtons button{
  height: 100%;
  margin: 0;
}

.input-error{
  outline: 1px solid red;
}

@media (max-width: 600px){

  .popoverContainer{
    container-type:unset;
    transition: all 1s ease-out;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr;
    height:auto;
  }

  .poNewCommentContainer{
    border-bottom-left-radius: 10px;
  }

  .popoverHeader{
    grid-template-columns: 100%;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
  }
  .poViewerHeader {
    font-size: 14px;
    padding: 7px;
  }

  .popoverContent{
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    max-height: unset;
  }

  .poComments{
    container-type: unset;
  }
  .submitButtons{
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
    height: 120px;
  }
  #commentList{
    border-top-left-radius: 10px;
    container-type:unset;
    height: 100%;
    max-height: 100%;
  }

  .closeX{
    top: 0;
    right: 0;
  }
  #poReviewPopover {
    height: 100%;
    width: 100%;
    max-height: 100%;
    max-width: 100%;
    min-height: 100%;
    min-width: 100%;
    padding: 0;
    border: none;
  }

  #poViewer {
    height: calc(100%);
    width: calc(100%);
  }

  .documentDisplay{
    width: 99%;
    height: 400px;
  }

  .documentIcon{
    height: 25px;
    width: 25px;
    padding: 0;
    margin: 0;
  }

  .documentIcon img{
    width: 20px;
    height: 20px;
    top: 3px;
    left: 0;
    position: relative;
    max-width: unset;
    padding: 0;
    margin: 0;
  }
  .formTextAreaQb textarea{
    width: 470px !important;
    height: 300px !important;
  }
  .priceBoxHeader {
    font-size: 15px;
  }
  .priceRightBox {
    padding-top: 90px !important;
  }
  #orderPartsTable {
    display: grid;

  }

  .partProcurementWizardTable{
    display: grid;
    grid-template-columns:
    minmax(max-content, auto)
    minmax(max-content, auto)
    250px
    150px
    150px
    150px
    150px
    150px
    150px
    150px
    minmax(max-content, auto)
    minmax(max-content, auto)
    minmax(max-content, auto)
    minmax(max-content, auto);

  }
  .purchaseOrderReviewTable {
    grid-template-columns:
    minmax(max-content, auto)
    minmax(max-content, auto)
    minmax(max-content, auto)
    minmax(max-content, auto)
    minmax(max-content, auto)
    minmax(max-content, auto);
  }
  .partOptionInputs {
    width: unset !important;
  }
  .transferPopoverHeader {
    display: grid;
  }
  .orderPartTableFooter {
    display: grid;
  }
}