.popup {
    position: absolute;
    display: none;
    background: #e8f0ff;
    border: 3px solid #143d8d;
    border-radius: 6px;
    padding: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.15);
    z-index: 9997;
    right: 10px;
  }
  .popup::before {
    content: "";
    position: absolute;
    top: -15px; /* above the popup */
    right: 55px; /* horizontal position relative to popup */
    border-width: 15px;
    border-style: solid;
    border-color: #143d8d transparent  transparent  transparent; /* arrow pointing up */
  }
  .button {
    background: linear-gradient(135deg, #143d8d, #1a4fbf); /* Gradient from #143d8d to a lighter blue */
    color: white;
    padding: 10px 20px;
    font-size: 16px;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0,0,0,0.2);
  }
  .button:hover {
    background: linear-gradient(135deg, #1a4fbf, #143d8d); /* Reverse gradient on hover */
    box-shadow: 0 6px 10px rgba(0,0,0,0.25);
    transform: translateY(-2px);
  }
  
  .button:active {
    box-shadow: 0 3px 5px rgba(0,0,0,0.2);
    transform: translateY(1px);
  }
  
  
  .button2 {
    padding:5px 10px;
    font-size: 12px;
  }
  .button.red {
    background: linear-gradient(135deg, #b00000, #b00000);
  }
  .button.green {    
    background: linear-gradient(#9ae6b1, #5fd883);
    color: #000000;
  }
  .button.yellow, .bg_yellow {
    background: linear-gradient(#fff757, #f8ef3c);
    color: #000000;
  }
    .button.orange , .bg_orange {  
      background: linear-gradient(#ffc86a, #ffa800);
      color: #000000;
    }
  .button.blue, .bg_blue {  
    background: linear-gradient(#7be2f9, #5ed5ef);
    color: #000000;
  }
  .button.gray {
    background: linear-gradient(#d8d8d8, #d8d8d8);
    color: #000000;
  }
  

  
.login_table td {
    padding: 10px 5px;;
    border-bottom:1px solid #b5c5e5;
    border-collapse: collapse;
}
.login_table td td {
		border:0;
}
  

#loginButtonId {
    float:right;
}



.table1 {
  border:0;
  margin:10px 5px;
}
.table1 tr th, .table11 tr th  {
  line-height: 1.15;
  border-collapse: collapse;
  text-align: left;
  padding: 10px;
  box-sizing: border-box;
  color: #000000;
  font-weight: normal;
  
 /* Replace all previous background definitions */
    background: #8ecae6;
    background: linear-gradient(90deg, #65a7c6 0%, #8ecae6 100%);
    background: -moz-linear-gradient(90deg, #65a7c6 0%, #8ecae6 100%);
    background: -webkit-linear-gradient(90deg, #65a7c6 0%, #8ecae6 100%);
    filter: none; /* remove old IE gradient filter */

  border-bottom: solid 2px #d8d8d8;
  border-right: solid 1px #686868;
}
.table1:not(.doNotStickTitleRow) tr th  {
  position: sticky;
  top: 0;
}
.table1 td, .table11 td {
  line-height: 1.15;
  border-collapse: collapse;
  text-align: left;
  padding: 5px;
  box-sizing: border-box;
  border: solid 1px #d8d8d8;
  
  border-right: 0;
  /* white-space: nowrap; */
  
}

.table1 .title2 td, .table1 td.title2, .table11 .title2 td, .table11 td.title2{
    
  background: rgb(202, 202, 202);
  background: linear-gradient(90deg, rgb(218, 216, 216) 0%, rgb(221, 221, 221) 100%);
  background: -moz-linear-gradient(90deg, hsla(218, 216, 216) 0%, hsla(240, 239, 239, 1) 100%);
  background: -webkit-linear-gradient(90deg, hsla(218, 216, 216) 0%, hsla(240, 239, 239, 1) 100%);
  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#909090", endColorstr="#C9C7C7", GradientType=1 );

  font-weight:bold;
}

.table1 .center th {
  text-align:center;
}
.table1 tr.odd td {
  background-color: #cae8f6;
}
#event_all_inspections {
  text-decoration:none;
  color:#143d8d;
  font-size:24px;
  text-align:center;
  font-weight:bold;
  padding: 10px 5px;
  margin-top:20px;
  display:block;
}


.smallforms input, .smallforms select {
  font-size:10px;
  background-color: #bebebe;
}
.smallforms input.yellow, .smallforms select.yellow {
  background-color: #ffffff;
}
.smallforms td {
  padding:3px;
}




table.sortable { border-collapse: collapse; width: 100%; }
table.sortable th, table.sortable td {
  __padding: 8px 10px;
  __border: 1px solid #ddd;
}
table.sortable th span {
  user-select: none;
  cursor: pointer;
  position: relative;
  margin-left:10px;
  __background: #f7f7f7;
}
/* arrow styling via ::after, content set by JS via data-sort */
table.sortable th span::before {
  content: attr(data-sort);
  position: absolute;
  left: -13px;
  font-size: 0.9em;
  color: #333;
}










/* Full-screen overlay with blur */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(5px);  /* blur everything behind */
  background-color: rgba(0,0,0,0.3); /* semi-transparent overlay */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9998;
}

/* Centered modal box */
.overlay .modal {
  background: #fff;
  padding: 10px;
  border-radius: 8px;
  max-width: 800px;
  width: 90%;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
  text-align: center;
  height: 400px;
  overflow:hidden;
  position:relative;
}
.overlay.heightSmall .modal {
  height: 200px;
}
.overlay .modal h3 {
  padding:10px;
  border-radius:10px;
  margin:0;
}
.overlay .modal .scrollingTableContainer {
  width:100%;
  height: 350px;
  overflow:auto;
}
.overlay.heightSmall .modal .scrollingTableContainer {
  height: 150px;
  display:flex;
  align-items:center;
  justify-content:center;
}
/* Hide overlay */
.overlay.hidden {
  display: none;
}

.closeBtn {
  position: absolute;
  top: 10px;
  right: 10px;
  border: none;  
  cursor: pointer;
  
}

.closeBtn:hover {
  color: #000;
}


















/* Full screen overlay */
.spinning-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255,255,255,0.8); /* start transparent */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease;
  z-index: 999999;
}


/* Spinner */
.spinning-wrapper .spinner {
  width: 100px;
  height: 100px;
  border: 24px solid #ccc;
  border-top-color: #143d8d;
  border-radius: 50%;
  animation: spinR 1s linear infinite;
}

/* Spin animation */
@keyframes spinR {
  to { transform: rotate(360deg); }
}

/* Hidden by default */
.spinning-wrapper.hidden {
  display: none;
}