/* Override Buttons */
.btn-success {
  background-color: #AFC137 !important;
  /* border-color: #AFC137 !important;*/
}

/* Override Button Hover/Focus States */
.btn-success:hover,
.btn-success:focus,
.btn-success:active {
  background-color: #697421 !important;
  /* Darker green for contrast */
  border-color: #AFC137 !important;
}

/* Override Text/Links */
.text-success,
a.text-success:hover {
  color: #def547 !important;
}

/* Override Background/Utility Classes */
.bg-success {
  background-color: #AFC137 !important;
}

/* Override Border/Form Focus */
.border-success {
  border-color: #AFC137 !important;
}

.footer-text {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  color: #999;
  text-decoration: none;
}

.background1 {
  background-color: #EFEFEF;
}

.background2 {
  background-color: #FFFF99;
}

.cardoffwhite {
  background-color: #f0f0f0;
}

.fixed-width-btn {
  width: 200px;
  text-align: center;
  display: block;
}

.radiitop {
  border-radius: 5px 5px 0 0 !important;
}

.error_codes {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: normal;
  color: #F00;
}

#fixed-div {
  position: fixed;
  /* This is the key property */
  top: 60px;
  /* Distance from the top of the viewport */
  right: 10px;
  /* Distance from the left of the viewport */
  width: 130px;
  /* Set a small size */
  height: 100px;
  background-color: #3498db;
  /* A nice blue color */
  color: white;
  /* White text for contrast */
  padding: 1px;
  border: 2px solid #2980b9;
  z-index: 1000;
  /* Ensures it stays on top of other content */
  text-align: center;
  line-height: 50px;
  /* Vertically center the text */
  font-family: Arial, sans-serif;
  font-size: 14px;
  border-radius: 5px;
  /* Rounded corners for a modern look */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  /* Subtle shadow */
}

.carousel-item img {
  width: 100%;
  height: 400px;
  /* Fixed height for consistent slides */
  object-fit: cover;
  /* Ensures images cover the area without distortion */
}

.carousel {
  margin: 0 auto;
  /* Center the carousel */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.fade_back {
  background-image: url(../images/stopwatch-fade.jpg);
  background-repeat: no-repeat;
  background-position: right top;
  font-family: Arial, Helvetica, sans-serif;
}

/* This targets the main container DataTables creates */
#tblUser_wrapper {
  width: 100%;
}

/* This ensures the table itself, inside the wrapper, is also 100% */
#tblUser {
  width: 100% !important;
  /* Use !important to override DataTables' inline styles */
}

/* Applies to viewports smaller than 576px (extra-small screens) */
@media (max-width: 575.98px) {
  .table-responsive-text {
    /* Reduce the font size for the entire table */
    font-size: 12px;
  }

  /* Optionally, target the data cells more specifically */
  .table-responsive-text td,
  .table-responsive-text th {
    padding: 0.5rem 0.25rem;
    /* Reduce padding for more space */
  }
}

/* Custom background colors */
.row-cancelled {
  background-color: #A8D5E1 !important;
}

.row-pending {
  background-color: #DD8C8C !important;
}

.row-default {
  background-color: #ffffff !important;
}

/* Base styles for vertical text */
.vertical-header-text {
  /* Use a fixed height for the TH to contain the rotated text */
  height: 150px;
  /* Adjust this value as needed to prevent clipping */
  white-space: nowrap;
  /* Prevents text wrapping before rotation */
  padding: 0;
  /* Remove padding for precise placement */
}

/* Style for the inner container that does the rotation */
.vertical-header-text>div {
  /* Position relative to the TH */
  position: relative;
  top: 50%;
  left: 50%;
  /* Apply the rotation */
  transform: translateX(-50%) translateY(-50%) rotate(-90deg);
  transform-origin: 50% 50%;
  /* Set a width so the rotated text doesn't push the table wider */
  width: 150px;
  /* Should match the TH height */
  text-align: left;
  /* Align text to the start of the rotated box */
  font-weight: bold;
  line-height: 1;
  /* Adjust if needed */
}

/* Container for scrolling - makes the whole table mobile friendly by enabling horizontal scroll */
.table-container {
  /* Set a maximum width for the container, typical for mobile layouts */
  max-width: 100%;
  /* Enable horizontal scrolling when content overflows */
  overflow-x: auto;
  /* Optional: Enable vertical scrolling for table body content if needed, 
       but `position: sticky` on the header handles this better. */
  /* max-height: 500px; */
  /* overflow-y: auto; */
}

/* Ensure the table doesn't shrink more than its content needs, important for sticky to work */
.table-container table {
  /* Prevents the table from collapsing into the container on mobile */
  min-width: max-content;
  border-collapse: collapse;
  /* A common table practice */
}

/* STICKY HEADER ROW (The first row) */
.table-container thead th {
  position: sticky;
  top: 0;
  /* Sticks to the top of the scrolling container */
  background-color: #f8f9fa;
  /* A light background is essential for visibility */
  z-index: 10;
  /* Ensures it stays above the body content */
}

/* STICKY FIRST COLUMN (The first cell in each row) */
/* Apply this to the first <th> in <thead> and the first <th>/<td> in <tbody> rows. 
   In my revised HTML, the first column cells are now <th> elements. */
.sticky-col {
  position: sticky;
  left: 0;
  /* Sticks to the left of the scrolling container */
  background-color: #f8f9fa;
  /* Background is essential for visibility, match header for aesthetic */
  z-index: 20;
  /* Higher z-index than sticky header to ensure corner cell is on top */
}

/* Corner cell (The cell at row 1, column 1) */
/* The element with both sticky classes needs the highest z-index to be on top of everything else */
.sticky-col.sticky-header {
  z-index: 30;
  /* Highest z-index */
}

.bradley-style {
  /* Font Family for the Bradley Hand style */
  font-family: 'Kalam', cursive;
  font-size: 20px;
  /* Adjust size for visibility */

  color: white;
  text-decoration: none !important;
  /* Use a bolder weight for a more pen-like look */
}

.bradley-style:hover {
  /* CRUCIAL: Force the underline to stay removed on hover */
  text-decoration: none !important;

  /* Keep the color white on hover to prevent color change */
  color: white !important;

  /* Prevent the cursor from changing */
  cursor: default !important;
}