h4 {
  color: blue;
}

.user_card {
  width: 100%;
  margin-top: 20px;
  margin-bottom: auto;
  background: rgba(143, 131, 248, 0);
  position: relative;
  display: flex;
  justify-content: center;
  flex-direction: column;
  padding: 10px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),
    0 6px 20px 0 rgba(0, 0, 0, 0.19);
  -moz-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),
    0 6px 20px 0 rgba(0, 0, 0, 0.19);
  border-radius: 10px;
}

.user_card .card-header {
  background-color: #f7f7f7;
  /* border-bottom: 0px solid #ddd; */
  padding: 0px;
  border-radius: 10px 10px 0 0;
  text-align: center;
  font-weight: bold;
}
/* 
.user_card .card-body {
  display: flex;
  gap: 10px;
} */


.table {
  --bs-table-bg: transparent;
  --bs-table-accent-bg: transparent;
  --bs-table-striped-color: #495057;
  --bs-table-striped-bg: #f8f9fa;
  --bs-table-active-color: #495057;
  --bs-table-active-bg: rgba(0, 0, 0, 0.1);
  --bs-table-hover-color: #495057;
  --bs-table-hover-bg: rgba(0, 0, 0, 0.0375);
  width: 100%;
  margin-bottom: 5rem;
  color: #495057;
  vertical-align: top;
  border-color: #d00aeb;
  border-radius: 10px;
}

.mygrid {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}

.left_grid {
  grid-row-start: 1;
  grid-row-end: 20;
  grid-column-start: 1;
  grid-column-end: 5;
  background-color: WhiteSmoke;
}

.right_grid {
  grid-row-start: 1;
  grid-row-end: 10;
  grid-column-start: 6;
  grid-column-end: 14;
  background-color: WhiteSmoke;
}


.stat_card {
  width: 20%;
  margin-top: 20px;
  margin-bottom: auto;
  background:rgba(143, 131, 248, 0);
  position: relative;
  display: flex;
  justify-content: center;
  flex-direction: column;
  padding: 10px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  -moz-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  border-radius: 10px;     
}

/* Added 8 June 2024 */

.issuePC {	
  width: 40%;
	margin-top: 20px;
	margin-bottom: auto;
	background:rgba(248, 131, 131, 0);
	position: relative;
	display: flex;
	justify-content: center;
	flex-direction: column;
	padding: 10px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.1);
	-webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.1);
	border-radius: 10px
  
}

.issuePC_subcon {	
  width: 100%;
	margin-top: 20px;
	margin-bottom: auto;
	background:rgba(248, 131, 131, 0);
	position: relative;
	display: flex;
	justify-content: center;
	flex-direction: column;
	padding: 10px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	-webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	-moz-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	border-radius: 10px
  
}

.fox {border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em;color: #d9480f;}
.box {border: 2px solid #654dff; border-radius: 5px; background-color: #a8ffc8; padding: 1em;color: #d9d90f;}
.box1 {
  height:100px;
  width:50%;
  grid-row-start: 1;
  grid-row-end: 20; 
  grid-column-start: 1;
  grid-column-end:6;
  background-color:rgba(248, 131, 131, 0);
}

.box2 {grid-row-start: 2; grid-row-end: 8; grid-column-start: 3;  grid-column-end: 5; background-color: #f7bfb7;}
.box3 {grid-row-start: 2; grid-row-end: 5; grid-column-start: 5; grid-column-end: 7;background-color: #acf8f8;}
.box3A {grid-row-start: 5; grid-row-end: 8; grid-column-start: 7;  grid-column-end: 9;background-color: #f1c2e9;}
.box4 {grid-row-start: 1; grid-row-end:10; grid-column-start:9; grid-column-end: 10; background-color: #f2fdc1;}  /*for scan canvas*/
.box5 {grid-row-start: 20; grid-row-end:35; grid-column-start: 1; grid-column-end:10; background-color: #f7aad3;}
.box6 {grid-row-start: 25; grid-row-end: 28; grid-column-start: 1; grid-column-end: 10;background-color: #EBEBEB;}
.box7 {grid-row-start: 16; grid-row-end: 22; grid-column-start: 4; grid-column-end: 10;background-color: #EBEBEB;}
.box8 {grid-row-start: 16; grid-row-end: 22; grid-column-start: 8; grid-column-end: 10;background-color: #EBEBEB;} 
.box9 {grid-row-start: 2; grid-row-end: 16; grid-column-start: 1; grid-column-end: 8;background-color: #EBEBEB;}
.box9 {background-color: #EBEBEB;}


#qr-code{border:0px solid rgb(253, 253, 253); padding-left: 0px;}

/* container {text-align: center; margin: 0;} */
qr-canvas {margin: auto; width: calc(50% - 20px); max-width: 400px;}
btn-scan-qr {cursor: pointer;}
btn-scan-qr img {height: 10em; padding: 15px; margin: 15px; background: white;}
qr-result { font-size: 1.2em; margin: 20px auto; padding: 20px; max-width: 700px; background-color: white;}


.stat_card {
  width: 100%;
  margin-top: 20px;
  margin-bottom: auto;
  background:rgba(143, 131, 248, 0);
  position: relative;
  display: flex;
  justify-content: center;
  flex-direction: column;
  padding: 10px;
  /* box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1), 0 3px 10px 0 rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  border-radius: 10px;        */
}

.table_stat_original {
  --bs-table-bg: transparent;
    --bs-table-accent-bg: transparent;
    --bs-table-striped-color: #495057;
    --bs-table-striped-bg: #f8f9fa;
    --bs-table-active-color: #495057;
    --bs-table-active-bg: rgba(0,0,0,0.1);
    --bs-table-hover-color: #495057;
    --bs-table-hover-bg: rgba(0,0,0,0.0375);
    width: 100%;
    margin-bottom: 0rem;
    color: #495057;
    vertical-align: top;
    border-color: #d00aeb;
    border-radius: 12px;                
}

.table_stat {
  --bs-table-bg: transparent;
    --bs-table-accent-bg: transparent;
    --bs-table-striped-color: #d00aeb;
    --bs-table-striped-bg: #f8f9fa;
    --bs-table-active-color: #495057;
    --bs-table-active-bg: rgba(0,0,0,0.1);
    --bs-table-hover-color: #495057;
    --bs-table-hover-bg: rgba(0,0,0,0.0375);
    width: 100%;
    margin-bottom: 0rem;
    color: #495057;
    vertical-align: top;
    border-color: #d00aeb;
    border-radius: 12px;                
}

.user_card {
  width: 300;
  margin-top: 10px;
  margin-bottom: auto;
  background:rgba(143, 131, 248, 0);
  position: relative;
  display: flex;
  justify-content: center;
  flex-direction: column;
  padding: 10px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  -moz-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  border-radius: 10px;       
  }

.drum_card {
	width: 100%;
	margin-top: 20px;
	margin-bottom: auto;
	background:rgba(143, 131, 248, 0);
	position: relative;
	display: flex;
	justify-content: center;
	flex-direction: column;
	padding: 10px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	-webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	-moz-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	border-radius: 10px;
  }

  .data-imp-card {
    width: 100%;
    margin-top: 20px;
    margin-bottom: auto;
    background:rgba(143, 131, 248, 0);
    position: relative;
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding: 10px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1), 0 3px 10px 0 rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    border-radius: 10px;  
     
}
.data-imp-card:hover {  
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  -moz-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  border-radius: 10px;
}
  
.regular-card {
  width: 100%;
  margin-top: 20px;
  margin-bottom: auto;
  background:rgba(143, 131, 248, 0);
  position: relative;
  display: flex;
  justify-content: center;
  flex-direction: column;
  padding: 10px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1), 0 3px 10px 0 rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  border-radius: 10px; 
}

.plain-card {
  width: 98%;
  margin-top: 20px;
  margin-bottom: auto;
  background:rgba(143, 131, 248, 0);
  position: relative;
  display: flex;
  justify-content: center;
  flex-direction: column;
  padding: 10px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  -webkit-box-shadow: 0 0px 1px 0 rgba(0, 0, 0, 0.1), 0 0px 1px 0 rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  border-radius: 10px; 
}




.map_card {
	width: 100%;
	margin-top: 20px;
	margin-bottom: auto;
	background:rgba(143, 131, 248, 0);
	position: relative;
	display: flex;
	justify-content: center;
	flex-direction: column;
	padding: 10px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	-webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	-moz-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	border-radius: 10px;                
  }

  .table {
    --bs-table-bg: transparent;
      --bs-table-accent-bg: transparent;
      --bs-table-striped-color: #495057;
      --bs-table-striped-bg: #f8f9fa;
      --bs-table-active-color: #495057;
      --bs-table-active-bg: rgba(0,0,0,0.1);
      --bs-table-hover-color: #495057;
      --bs-table-hover-bg: rgba(0,0,0,0.0375);
      width: 100%;
      margin-bottom: 5rem;
      color: #495057;
      vertical-align: top;
      border-color: #d00aeb;
      border-radius: 10px;
    }

  #map { height: 100%;}
  html, body {height: 100%; margin: 0;padding: 0;}


  .btn {
    background-color: #6c757d;
    border: none;
    color: white;
    padding: 5px 15px;
    cursor: pointer;
    font-size: 15px;
    border-radius: 6px;
       
  }
  
  
    .dashboard-card {
      width: 100%;
			margin-top: 20px;
			margin-bottom: auto;
			background:rgba(143, 131, 248, 0);
			position: relative;
			display: flex;
			justify-content: center;
			flex-direction: column;
			padding: 10px;
			box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
			-webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
			-moz-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
			border-radius: 10px;     
  }
  .dashboard-card:hover {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1), 0 3px 10px 0 rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    border-radius: 10px;   
}


    .table_stat {
      --bs-table-bg: transparent;
        --bs-table-accent-bg: transparent;
        --bs-table-striped-color: #495057;
        --bs-table-striped-bg: #f8f9fa;
        --bs-table-active-color: #495057;
        --bs-table-active-bg: rgba(0,0,0,0.1);
        --bs-table-hover-color: #495057;
        --bs-table-hover-bg: rgba(0,0,0,0.0375);
        width: 100%;
        margin-bottom: 0rem;
        color: #495057;
        vertical-align: top;
        border-color: #d00aeb;
        border-radius: 12px;                
    }

    .cardValues {
      left: 75%;
      position: absolute;
    }


  .row-gap {
      margin-bottom: -1rem; /* Adjust this value for more or less gap between rows */
  }

  .row-gap-bottom-3 {   
    margin-bottom: 3rem;
}

  .colm-gap {
    margin-right:4rem; /* Adjust this value for more or less gap between rows */
}
  .btn-gap {
    margin-right:2rem; /* Adjust this value for more or less gap between rows */
}
  .txt-gap {
    margin-right:0.25rem; /* Adjust this value for more or less gap between rows */
}

.txt_center {
  text-align: center;
  margin-left:25rem;
  font-family: Inter, Helvetica, "Apple Color Emoji", "Segoe UI Emoji", NotoColorEmoji, "Noto Color Emoji", "Segoe UI Symbol", "Android Emoji", EmojiSymbols, -apple-system, system-ui, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", sans-serif;
  font-size: 1rem;
}
  .scrollable_datacard {
    height: 200px; /* Set your desired fixed height */
    overflow-y: auto;
}

/* Buttons Class */

/* Darker background on mouse-over */
.btn:hover {
  background-color: #343a40;
}


.btn_blue {
background-color: DodgerBlue;
border: none;
color: white;
padding: 5px 5px;
cursor: pointer;
font-size: 10px;
border-radius: 5px;
}

/* Darker background on mouse-over */
.btn_blue:hover {
background-color: RoyalBlue;
}

.btn_clear_current {
  font-weight: 100%;
  align-items: center;
  appearance: none;
  background-color: #3EB2FD;
  background-image: linear-gradient(1deg, #4F58FD, #149BF3 99%);
  background-size: calc(100% + 10px) calc(100% + 10px);
  border-radius: 10px;
  border-width: 0;
  box-shadow: none;
  box-sizing: border-box;
  color: #FFFFFF;
  cursor: pointer;
  display: inline-flex;
  /* font-family: CircularStd, sans-serif; */
  font-family: Inter, Helvetica, "Apple Color Emoji", "Segoe UI Emoji", NotoColorEmoji, "Noto Color Emoji", "Segoe UI Symbol", "Android Emoji", EmojiSymbols, -apple-system, system-ui, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", sans-serif;
  font-size: 0.8rem;
  height:35px;
  justify-content: center;
  line-height: 35px; 
  opacity: 0.85; 
  padding: 0px 8px;
  position: relative;
  text-align: center;
  text-decoration: none;
  transition: background-color .2s, background-position .2s;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  vertical-align: center;
  white-space: nowrap;
  width: 120px;
}
.btn_clear_current:hover {
  background-position: -10px -10px;
}
.btn_clear_all {
  align-items: center;
  font-weight: 100%;
  background-color: initial;
  background-image: linear-gradient(-180deg, #FF7E31, #E62C03 99%);
  border-radius: 10px;
  box-shadow: rgba(0, 0, 0, 0.1) 0 2px 4px;
  color: #FFFFFF;
  cursor: pointer;
  display: inline-flex;
  font-family: Inter, -apple-system, system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  height: 35px;
  line-height: 35px;
  opacity: 0.85;
  outline: 0;
  overflow: hidden;
  padding: 0 8px;
  pointer-events: auto;
  position: relative;
  text-align: center;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  vertical-align: top;
  white-space: nowrap;
  z-index: 9;
  border: 0;
  transition: box-shadow .2s;
  width: 120px;
}

.btn_clear_all:hover {
  box-shadow: rgba(253, 76, 0, 0.5) 0 3px 8px;
}


.btn_issue {
  align-items: center;
  appearance: none;
  background-color: #3EB2FD;
  background-image: linear-gradient(1deg, #4F58FD, #149BF3 99%);
  background-size: calc(100% + 10px) calc(100% + 10px);
  border-radius: 10px;
  border-width: 0;
  box-shadow: none;
  box-sizing: border-box;
  color: #FFFFFF;
  cursor: pointer;
  display: inline-flex;
  /* font-family: CircularStd, sans-serif; */
  font-family: Inter, Helvetica, "Apple Color Emoji", "Segoe UI Emoji", NotoColorEmoji, "Noto Color Emoji", "Segoe UI Symbol", "Android Emoji", EmojiSymbols, -apple-system, system-ui, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", sans-serif;
  font-size: 0.9rem;
  justify-content: center;
  line-height: 24px; 
  height:40px;
  padding: 0px 8px;
  position: relative;
  text-align: center;
  text-decoration: none;
  transition: background-color .2s, background-position .2s;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  vertical-align: center;
  white-space: nowrap;
  width: 150px;
}

.btn_issue:hover {
  background-position: -10px -10px;
}


.btn_download {   
  background-color: #3EB2FD;
  background-image: linear-gradient(1deg, #4F58FD, #149BF3 99%);
  background-size: calc(100% + 10px) calc(100% + 10px);
  border-radius: 10px;
  border-width: 0;
  box-shadow: none;
  box-sizing: border-box;
  color: #FFFFFF;
  cursor: pointer;
  display: inline-flex;
  font-family: CircularStd, sans-serif;
  font-family: Inter, Helvetica, "Apple Color Emoji", "Segoe UI Emoji", NotoColorEmoji, "Noto Color Emoji", "Segoe UI Symbol", "Android Emoji", EmojiSymbols, -apple-system, system-ui, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", sans-serif;
  font-size: 0.8rem;
  height:35px;
  justify-content: center;
  line-height: 35px; 
  opacity: 0.85; 
  padding: 0px 8px;
  position: relative;
  text-align: center;
  text-decoration: none;
  transition: background-color .2s, background-position .2s;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  vertical-align: center;
  white-space: nowrap;
  width: 120px; 
}

.btn_download::before {
  content: "\f019"; 
  font-family: "Font Awesome 5 Free"; 
  font-weight: 900; 
  margin-right: 8px; 
  display: inline-block;
}

.btn_download:hover {
  background-position: -10px -10px; 
  background-color: #3EB2FD;
}

*:disabled {
  opacity: 0.4; /* example: reduce opacity to indicate disabled state */
  cursor: not-allowed;
  }

.hidden-column {
    display: none;
}

#checked_pcs {
  margin-right: 5%;  
}
#Notes_to_subcon {
  height:5px;
}

.clear_all_other {
  background: #5E5DF0;
  border-radius: 10px;
  box-shadow: #5E5DF0 0 10px 20px -10px;
  box-sizing: border-box;
  color: #FFFFFF;
  cursor: pointer;
  font-family: Inter, Helvetica, "Apple Color Emoji", "Segoe UI Emoji", NotoColorEmoji, "Noto Color Emoji", "Segoe UI Symbol", "Android Emoji", EmojiSymbols, -apple-system, system-ui, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", sans-serif;
  /* font-size: 16px; */
  font-size: 0.8rem;
  /* font-weight: 700;*/
  line-height: 24px; 
  height:40px;
  opacity: 0.9;
  outline: 0 solid transparent;
  padding: 0px 8px;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  vertical-align: center;
  width: 120px;
  word-break: break-word;
  border: 0;
}