:root{
	--poblue: #c2e6fe;
}

body,html{
	margin:0;
	width:100%;
}

body{
	font-family:"verdana";
	font-size:14px;
}


.space-mono-regular {
  font-family: "Space Mono", monospace;
  font-weight: 400;
  font-style: normal;
}

.space-mono-bold {
  font-family: "Space Mono", monospace;
  font-weight: 700;
  font-style: normal;
}

.space-mono-regular-italic {
  font-family: "Space Mono", monospace;
  font-weight: 400;
  font-style: italic;
}

.space-mono-bold-italic {
  font-family: "Space Mono", monospace;
  font-weight: 700;
  font-style: italic;
}

.alertify{
	z-index:200;
}

.alertify-logs{
	z-index:200;
}

#loginDiv{
	width:335px;
	border:1pt solid #ccc;
	border-radius:3px;
	padding:8px;
	background:var(--poblue);
	margin:auto;
}
#loginDiv input{
	width:115px;
}

#poEditor{
		display:none;
		position:absolute;
		width:500px;
		height:400px;		
		background:#333;
		color:#fff;
		border-radius:3px;
		z-index:5;
		padding:10px;
}

.lbl{
	display:inline-block;
	width:150px;
	text-align:right;
	padding-right:5px;
}

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform: -webkit-translate(-50%, -50%);
  transform: -moz-translate(-50%, -50%);
  transform: -ms-translate(-50%, -50%);
}

#popoDescription{
	width:65%;
}
#powherePurchased{
	width:65%;
}

.stubWrapper{	
	width:100%;	
	position:relative;
}

.mobileTable {
  overflow-x: auto;
  width: 100%;
}

#rtable{
	font-size:.9em;
	border-collapse:collapse;
	width:95%;	
	margin:auto;
	border:1pt solid #ccc;
	min-width:1200px;
}

#rtable th{
	background: #f2f2f2;
	border-right:1pt solid #333;
}
#rtable th:last-child {
    border-right: none;
}

/* PO */
#rtable th:nth-child(1){
	width:55px;	
}
#rtable td:nth-child(1){ 
	width:47px;
}

/* date */
#rtable th:nth-child(2){
	width:152px;	
}
#rtable td:nth-child(2){ 
	width:144px;
}

/* description */
#rtable th:nth-child(4){
	width:152px;	
}
#rtable td:nth-child(4){ 
	width:144px;
}

/* complete */
#rtable th:nth-child(16){
	width:65px;	
}
#rtable td:nth-child(16){ 
	width:57px;
}

/* saved by */
#rtable th:nth-child(17){
	width:65px;	
}
#rtable td:nth-child(17){ 
	width:57px;
}

#rtable td {		
  border-right: 1pt solid #666; /* Add a border to the right */
  word-wrap: break-word; /* Ensure long words break and wrap to the next line */
  word-break: break-word; /* For compatibility with older browsers */
  white-space: normal; /* Allow text to wrap onto the next line */  
  padding: 5px; /* Add padding inside cells */
  overflow: visible; /* Let wrapped text expand within the cell */	
}

#rtable td:last-child {
    border-right: none;
}

#rtHead{
	  position: sticky;
	  top: 0;
	  background-color: #f1f1f1;
	  z-index: 2; /* Ensures it stays on top while scrolling */	
}

#rtBody{
	  display: block;
	  max-height: 855px; /* Set the height you want */
	  overflow-y: auto; /* Adds vertical scrollbar */	
	  font-family:arial;
	  /* width: calc(100% - 8px);  Subtract the scrollbar width */
}

#rtHead, #rtBody tr {
    display: table;
    width: 100%;
    table-layout: fixed; /* Ensures correct column widths */
}

/* To prevent scrollbars from shrinking the column widths */
#rtBody::-webkit-scrollbar {
   width: 0px;  
}

#rtBody::-webkit-scrollbar-thumb {
    background-color: #ccc; /* Style the scrollbar thumb */
}

.rtRow:nth-child(even) {
    background-color: #b6d5cb; /* green bar */
}

#logo{
	width:100px;
	position:absolute;
	z-index:10;
	top:25px;
	left:25px;
}

#content{
	width:100%;
	padding:20px;	
	margin:auto;
}

.ib{
	display:inline-block;
}

.hideMe{
	display:none;
}

#allSearchQ{
	width:172px;
}

#searchPanel{
	width:50%;
	margin:auto;
	text-align:left;
	padding:15px;
	border:1pt solid #ccc;
	border-radius:3px;
	background:#fff;
}

#searchPanel input{
		background:#fffeda;
}

#po2fetch{
	width:75px;
}

.flx{
	display:flex;
}

.half{
	width:50%;
	text-align:top;
	padding:10px;
}

.jqdp{
	width:80px;
}

.btn{
	width:100px;
	color:#000;
	background:#eee;
	height:30px;
	border:1pt solid #888;
	border-radius:3px;	
	line-height:30px;
	text-align:center;
	display:inline-block;	
	z-index:10;
}

.btn:hover{
	cursor:pointer;
	background:#333;
	color:#fff;
}

.smBtn{
	width:80px;
	color:#000;
	background:#eee;
	height:20px;
	border:1pt solid #888;
	border-radius:3px;	
	line-height:17px;
	text-align:center;
	display:inline-block;	
	z-index:10;
}

.smBtn:hover{
	cursor:pointer;
	background:#333;
	color:#fff;
}


.userListContainer {
	position: fixed;
  width: min(800px, 100%);
  height: 80px;
  z-index: 10;
  left: 0;
  bottom: 5px;
  display: flex;
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-content: flex-start;
}


.userContainer {
  display: flex;
  align-items: center;
  background-color: rgb(255, 255, 255);
  border-radius: 5px;
  padding: 5px;
  border-style: solid;
  border-color: rgb(200, 200, 200);
  border-width: 1px;
  margin: 6px;
}



.dot{
	width: 16px;
  height: 16px;
  border-radius: 50%;
  display: inline-block;
}

/*
.userContainer:nth-of-type(1) {
	color: var(--blueClr);
	.dot {
		background-color: var(--blueClr);
	}
	
}

.userContainer:nth-of-type(2) {
	color: var(--cyanClr);
	.dot {
		background-color: var(--cyanClr);
	}
	
}

.userContainer:nth-of-type(3) {
	color:  var(--greenClr);
	.dot {
		background-color: var(--greenClr);
	}
	
}


.userContainer:nth-of-type(4) {
	color: var(--yellowClr);
	.dot {
		background-color: var(--yellowClr);
	}
	
}

.userContainer:nth-of-type(5) {
	color: var(--redClr);
	.dot {
		background-color: var(--redClr);
	}
	
}

.userContainer:nth-of-type(6) {
	color: var(--purpleClr);
	.dot {
		background-color: var(--purpleClr);
	}
	
}

.userContainer:nth-of-type(7) {
	color: var(--pinkClr);
	.dot {
		background-color: var(--pinkClr);
	}
	
}

.userContainer:nth-of-type(8) {
	color: var(--brownClr);
	.dot {
		background-color: var(--brownClr);
	}
	
}
*/


.username {
    display: inline-block;
    margin: 0px 0 0 10px;
    font-size: 16px;
}




.poNumber:hover{
	cursor:pointer;
	background:#333;
	color:#fff;
}

.disabled {
	cursor: default !important;
	color: rgb(0, 0, 0) !important;
}

.poActive{
	margin-left:calc( 50% - 7.5px );
}

.ctr{
	text-align:center;
}

.clr{
	clear:both;
}

.clr5{
	clear:both;
	height:5px;
}	

.clr10{
	clear:both;
	height:10px;
}	

.clr20{
	clear:both;
	height:20px;
}	

.clr200{
	clear:both;
	height:200px;
}	

.clr100{
	clear:both;
	height:100px;
}	

.modal {
    display:    none;
    position:   fixed;
    z-index:    100;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba( 211, 211, 211, .8 ) 
                url('../images/loading.gif') 
                50% 50% 
                no-repeat;
    background-size:40px;            
}


@media screen and (max-width: 768px) {
  .mobileTable table {
    min-width: 1200px; /* Adjust this value based on your table's content */
  }
}