body {
      font-family: 'Poppins', sans-serif;
      margin: 0;
      padding: 0;
      background-color: #e5e5f7;
      background-image: radial-gradient(#444cf7 0.5px, transparent 0.5px), radial-gradient(#444cf7 0.5px, #e5e5f7 0.5px);
      background-size: 20px 20px;
      background-position: 0 0, 10px 10px;
    }

    .payroll-header {
      width: 100%;
      background-color: #0b1a2d;
      color: white;
      text-align: center;
      padding: 1rem 0;
      box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
    }

    .payroll-footer {
      width: 100%;
      background-color: #0b1a2d;
      color: white;
      text-align: center;
      padding: 1rem 0;
      margin-top: 20px;
      box-shadow: 0px -2px 5px rgba(0, 0, 0, 0.2);
    }

    .payroll-body {
      display: flex;
      flex-direction: row;
      margin: 20px 0;
	 
    }

.payroll-sidebar {
  padding: 0 20px; /* Adds space on the left and right of the entire sidebar */
    background-color: #0b1a2d;
}

.payroll-sidebar a {
  display: flex;
  align-items: center; /* Aligns icon and text vertically */
  gap: 12px; /* Adds spacing between the icon and text */
  text-decoration: none; /* Removes underline from links */
  color: #000;
  font-size: 1.1rem; /* Adjusts font size for better readability */
  font-weight: 600; /* Boldens text */
  padding: 1rem 1.5rem; /* Adds internal spacing for larger buttons */
  border-radius: 8px; /* Softens button edges */	
  transition: background-color 0.3s, color 0.3s;

  margin-bottom: 10px; /* Adds spacing between buttons */
  margin-left: 10px; /* Adds horizontal space between button and sidebar edge */
  margin-right: 10px; /* Adds horizontal space between button and sidebar edge */
}

.payroll-sidebar a:hover {
  background-color: #0b1a2d;
  color: white;
}

.payroll-sidebar a img {
  width: 32px; /* Larger icon size for better visibility */
  height: 32px;
  object-fit: contain; /* Ensures proper scaling of icons */
}


    .payroll-content {
      flex-grow: 1;


      border-radius: 8px;
      margin: 0 20px;
    }
	  .payroll-sidebar a:hover {
    background: #00203F; /* Hover background color */
    color: #01fdfd; /* Hover text color */
    transform: scale(1.03); /* Subtle hover scaling */
  }

  .payroll-sidebar a:link,
  .payroll-sidebar a:visited {
    text-decoration: none; /* Ensures links remain without underlines */
  }

  .payroll-sidebar a:active {
    text-decoration: underline; /* Adds underline for active links */
  }
}

/* Adjust font size for smaller screens */
@media (max-width: 1200px) {
  .payroll-sidebar a {
    font-size: 0.9rem; /* Slightly smaller font size for medium screens */
  }
}

@media (max-width: 768px) {
  .payroll-sidebar a {
    font-size: 0.8rem; /* Smaller font size for small screens */
  }
}

@media (max-width: 480px) {
  .payroll-sidebar a {
    font-size: 0.75rem; /* Further reduced font size for very small screens */
  }
}
/*mobile design*/
@media (max-width: 1066px) {
  .payroll-body {
    flex-direction: column; /* Stacks content vertically */
    margin-top: 0; /* No extra margin at the top */
  }

  .payroll-sidebar {
    width: 100%;
    position: relative; /* Ensures it remains part of the normal flow */
    top: 0; /* Aligns with the top of the page */
    left: 0;
    display: flex; /* Use flexbox for a horizontal layout */
    flex-direction: row; /* Ensures items are in a row */
    overflow-x: auto; /* Enables horizontal scrolling for items */
    padding: 0.5rem 0;
    margin: 0; /* Removes any unwanted margin */
    background-color: #0b1a2d; /* Updated background color for mobile menu */
    z-index: 1; /* Keeps it above the content */
    border-bottom: 1px solid #ddd;
    white-space: nowrap; /* Prevents menu items from wrapping */
	padding-left:50px;
  }

  .payroll-sidebar a {
    display: inline-block; /* Ensures horizontal alignment */
    align-items: center; /* Aligns image and text vertically */
    gap: 8px; /* Adds space between the image and text */
    padding: 8px 12px; /* Adds padding for medium-sized buttons */
    margin: 0 8px; /* Adds spacing between buttons */
    font-size: 0.8rem; /* Slightly smaller text size for mobile */
    font-weight: 600; /* Keeps text bold */
    text-transform: uppercase; /* Transforms text to uppercase */
    color: white; /* Default text color for dark background */
    background: transparent; /* Buttons remain transparent */
    border: 2px solid #01fdfd; /* Keeps a visible border */
    border-radius: 4px; /* Slightly rounded edges */
    transition: all 0.3s ease-in-out; /* Smooth hover transitions */
    text-decoration: none; /* Removes underline */
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    text-align: center; /* Centers text */
    flex-shrink: 0; /* Prevents items from shrinking */
    white-space: nowrap; /* Prevents text from wrapping */
  }

  .payroll-sidebar a img {
    width: 16px; /* Adjusts image size for mobile */
    height: 16px; /* Matches the image size proportionally */
    object-fit: contain; /* Ensures proper scaling of images */
  }

  .payroll-sidebar a:hover {
    background: #00203F; /* Hover background color */
    color: #01fdfd; /* Hover text color */
    transform: scale(1.05); /* Slight hover scaling */
  }

  .payroll-content {
    margin-top: 60px; /* Adds space below the horizontal sidebar */
  }
}


/*desktop design*/
@media (min-width: 1066px) {
  .payroll-body {
    display: flex;
    flex-direction: row;
    margin: 0; /* Removes gaps between header, sidebar, and footer */
  }

  .payroll-sidebar {
    width: 250px;
    position: sticky; /* Ensures the sidebar follows scrolling */
    top: 0; /* Sticks the sidebar below the header */
    left: 0;
    height: 100vh; /* Spans the full height of the viewport */
    overflow-y: auto; /* Allows vertical scrolling if necessary */
    padding: 0; /* Removes internal padding for precise alignment */
    background-color: #0b1a2d; /* Sidebar background color */
    border-right: 1px solid #ddd;
    display: flex;
    flex-direction: column;
    padding-top: 200px;
  }

  .payroll-sidebar a {
    display: flex; /* Use flexbox for alignment */
    align-items: center; /* Aligns image and text vertically */
    gap: 12px; /* Adds space between the image and text */
    margin-bottom: 35px; /* Adds consistent vertical spacing between buttons */
    margin-left: 15px; /* Ensures proper spacing from the sidebar edge */
    margin-right: 15px; /* Ensures proper spacing from the sidebar edge */
    padding: 8px 16px; /* Adjusts padding for balanced button size */
    font-size: 1rem; /* Default font size for larger screens */
    font-weight: 600; /* Keeps text bold */
    text-transform: uppercase; /* Transforms text to uppercase */
    color: white; /* Default text color for dark background */
    background: transparent; /* Transparent default background */
    border: 2px solid #01fdfd; /* Keeps a visible border */
    border-radius: 4px; /* Slightly rounded edges */
    transition: all 0.3s ease-in-out; /* Smooth hover transitions */
    text-decoration: none; /* Removes underline */
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    text-align: left; /* Aligns text and image to the left */
    width: calc(100% - 30px); /* Ensures buttons are responsive */
  }

  .payroll-sidebar a img {
    width: 18px; /* Adjusts image size */
    height: 18px; /* Matches the image size proportionally */
    object-fit: contain; /* Ensures proper scaling of images */
  }

  .payroll-sidebar a:hover {
    background: #00203F; /* Hover background color */
    color: #01fdfd; /* Hover text color */
    transform: scale(1.03); /* Subtle hover scaling */
  }

  .payroll-sidebar a:link,
  .payroll-sidebar a:visited {
    text-decoration: none; /* Ensures links remain without underlines */
  }

  .payroll-sidebar a:active {
    text-decoration: underline; /* Adds underline for active links */
  }
}

/* Adjust font size for smaller screens */
@media (max-width: 1200px) {
  .payroll-sidebar a {
    font-size: 0.9rem; /* Slightly smaller font size for medium screens */
  }
}

@media (max-width: 768px) {
  .payroll-sidebar a {
    font-size: 0.8rem; /* Smaller font size for small screens */
  }
}

@media (max-width: 480px) {
  .payroll-sidebar a {
    font-size: 0.75rem; /* Further reduced font size for very small screens */
  }
}