:root {
	--bs-dark-rgb: 14, 24, 42;
 }

html, body {
    height: 100vh;
    margin: 0;
    font-family: "Poppins", sans-serif;
    background-color: #f1f5f9;
    font-size: 14px;
}
.layout-container {
	display: flex;
	height: 100vh;
	max-height: 100vh;
}

a { color:#13a4c4; }

.h5, h5 {
    font-size: 1.25rem;
    color: #728c90;
    font-weight: 400;
}

#info-message {
    background: linear-gradient(to right, #dec5ee, #b5f5f9, #b3f565);
    position: fixed;
    width:100%;
    padding:6px;
    height:30px;
    font-size:12px;
    text-align:center;
     z-index: 1000;
}

/* Left navigation styles */
#leftNav {
    background-color: #0e182a;
    max-width: 280px;
    width: 280px; /* Fixed width for left nav */
    height: 100vh;
    z-index: 1000;
    overflow: scroll;
    padding-bottom: 70px;
}

/* Hide the left nav when closed */
#leftNav.closed {
    transform: translateX(-280px);
}

/* Top navigation styles */
.top-nav {
   background-color: #fff;
   padding: 12px 25px;
   display: flex;
   justify-content: space-between;
   align-items: center;
   /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */
   position: fixed;
   top: 30px;
   width: calc(100% - 280px);
   z-index: 999;
    border-bottom:solid 1px #dfdddd;
}

.sidebar {
	--bs-offcanvas-width: 280px;
	background-color: var(--bg-color);
	flex-shrink: 0;
	padding: 20px;
	min-width: var(--bs-offcanvas-width); /* this is here to help support top-nav compatibility */
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: var(--scrollbar-color) var(--bg-color);
}
#subNav {
    padding:20px 0;
    width: 330px !important;
    border-right: solid 1px #e8e8e8;
}
.content-wrapper {
	flex: 1;
	display: flex;
	flex-direction: column;
}
.header .form-control {
	max-width: 300px;
}
.content {
	flex: 1;
	display: flex;
	overflow-y: auto;
}
.content-2 {
	padding: 3rem;
    width: 100%;
}

/* Adjust width of top nav when sidebar is closed */
#content.collapsed, #content.collapsed #top-nav {
    width: 100%;
    margin-left: 0;
}

/* Hamburger button */
.hamburger {
    font-size: 20px;
    color: #0e182a;
    cursor: pointer;
}

/* User account icon */
.user-account {
    font-size: 16px;
    color: #0e182a;
    cursor: pointer;
}

/* Logout button */
.logout {
    font-size: 16px;
    color: #0e182a;
    text-decoration: none;
    margin-left: 15px;
}

/* Right content area */
#content {
    position:absolute;
    flex-grow: 1;
    margin-left: 280px;
    margin-top:58px;
    /* margin: 0 auto; */
    transition: margin-left 0.3s ease;
    width: calc(100% - 280px);
}

.nav-logo {
    display:block;
    padding:30px 30px 50px;
}

/* Navigation List Styles */
.nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.nav-item {
    margin-bottom: 6px; /* Space between items */
}

.header .no-caret::after {
  display: none;
}

/* Fixed-width container for icons */
.icon-container {
    display: inline-flex;
    width: 40px;
    justify-content: left;
    align-items: center;
}

.nav-link {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    font-size: 13px;
    letter-spacing: 0.4px;
    color: #dfdbdb;
    text-decoration: none;
    border-radius: 6px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.nav-icon {
    color: #a7a9af; /* Default icon color */
    transition: color 0.2s ease;
    font-size: 18px;
}

.employee-nav .nav-icon { font-size: 23px; }
.employee-nav a { color: #000; text-decoration: none !important; }
.employee-nav li.active a { color:#4F46E5; }

/* Hover and Active State */
.nav-link:hover,
.nav-link:focus,
.nav-link.active {
    background-color: #343a48;
    color: white;
}

.nav-link:hover .nav-icon,
.nav-link:focus .nav-icon,
.nav-link.active .nav-icon {
    color: white; /* Icon color on hover or active */
}


/* Card Styling */
.card {
    background-color: #fff;
    border: 1px solid #fafafa;
    border-radius: 15px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

/* Card Container */
.cards-container, .payroll-container {
    padding: 20px;
    max-width: 1024px;
    margin:0 auto;
}

.card-body {
    padding: 30px 30px 45px 30px;
}

/* Positioning the Green Check Icon */
.card-check-icon {
    position: absolute;
    top: 25px;
    right: 25px;
    color: #28a745; /* Green color for check icon */
    font-size: 1.0rem;
}

.btn-paycub {
    border: solid 1px #b5b3b3;
    border-radius:25px;
    padding: 9px 35px;
    font-size:14px;
    margin:8px 10px 8px auto;
}
.btn-paycub:hover {
    border: solid 1px #6f42c1;
}
.btn-payroll-edit {
    color:white;
    border-radius:25px;
    padding: 9px 25px;
    font-size:14px;
    margin:8px 10px 8px auto;
    background: #6f42c1;
}
.btn-payroll-edit:hover {
    background: #956ae1;
    color:white;
}

/* Blue Pill Styling */
.card-pill {
   position: absolute;
    top: 25px;
    left: 25px;
   
    padding: 3px 10px;
    font-size: 0.7rem;
    border-radius: 12px;
    font-weight: bold;
}
.pill-blue {
      background-color: #dbeafe;
    color: #2f5689;
}
.pill-yellow {
     background-color: #fef3c7;
    color: #92400e;
}
.pill-green {
     background-color: #dcfce7;
    color: #31784c;
}

/* Card Title */
.card-title {
    font-size: 15px;
    margin-top: 45px; /* Space from the top for icons/pill */
}

/* Card Text */
.card-text {
    font-size: 13px;
    color: #989ea4; /* Grey color */
    margin-top: 15px;
}
.payroll-container .card-pill {
    position:relative;
    top:0;
    left:0;
    margin: 0 0 0 4px;
}
.payroll-container .card-text {
     margin: -3px 0 0 8px;
    font-size:12px;
}
.payroll-container .card-title {
   margin: 7px 0 0 8px; /* Space from the top for icons/pill */
}
.payroll-container .card-body {
    padding: 15px 25px;
}

.payroll-container .pc-input {
    background:#fbfbfb;
}
.payroll-container .payroll-input {
    max-width:140px;
}
.employee-photo {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    object-fit: cover;
}
.employee-photo-50 {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    object-fit: cover;
}
.mini-label {
    display: block;
    font-size: .6rem;
    color: #adabab;
    /* height: 70px; */
    position: absolute;
    top: 14px;
    letter-spacing: .25px;
}
/* Card Footer */
.card-footer {
    border-top: 2px solid #6f42c1; /* Purple line at top */
    padding-top: 10px;
    display: flex;
    justify-content: center;
    background:#f8fafc;
}

.table-container {
    padding: 20px 50px 20px 20px;
    width: 100%;
    margin: 0 auto;
}

.table-container table {
    margin:15px;
}
.table-container table th {
    border-bottom:solid #4d4a4a;
    padding:14px;
}
.table-container table td {
    border-bottom:solid #f1ebeb;
    padding:14px;
}
/* Run Payroll Button */
.btn-primary {
    background-color: #18b7da; /* Purple background */
    border: none;
    padding: 8px 16px;
    font-size: 0.9rem;
   font-size: 15px;
    border-radius: 23px;
}

.btn-primary:hover {
    background-color: #12a0c0; /* Darker purple on hover */
}

/* Hide the left nav on screens smaller than 912px */
@media (max-width: 912px) {
       
    .table-responsive table {
        margin:0;
    }
    .table-container {
        padding: 20px 35px 20px 20px;
    }
}

/* Banner Styling */
.banner {
    background-color: #1f283b;
    color: white;
    height: 260px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    /* padding: 20px; */
    margin: 30px 0 0 0;
}

.banner-heading {
    font-size: 2.7rem;
    margin: 0 40px 10px;
    font-weight: 900;
}

.banner-subheading {
    font-size: 18px;
    color: #94a3b8; /* Grey color for subheading */
}

/* Input Icon Container */
.input-icon-container {
    position: relative;
    
}

.payroll-container .input-icon-container {
    margin-top: 12px;
}
.payroll-container .btn-paycub {
    margin: 13px 10px 0px 20px;
}

.pc-input {
    width: 100%;
    padding: 10px 15px 10px 50px; /* Extra left padding for icon */
    font-size: 14px;
    border: 1px solid #e4e4e4;
    border-radius: 7px;
    outline: none;
    transition: border-color 0.3s ease;
}

.pc-input:focus {
    border-color: #6f42c1; /* Purple border on focus */
    box-shadow: 0 0 0 2px rgba(111, 66, 193, 0.2); /* Optional focus shadow */
}

.pc-input::placeholder {
    color: #b0b3b8; /* Adjust to your preferred light color */
    opacity: 1; /* Ensures full color opacity on most browsers */
}

.input-icon-container i {
    position: absolute;
    top: 50%;
    left: 20px; /* Position the icon inside the padding area */
    transform: translateY(-50%);
    color: #c2c3c8; /* Default icon color */
    font-size: 1rem;
    pointer-events: none; /* Makes the icon unclickable */
}

.input-icon-container input {
   padding-left: 42px !important;     
}

/* Magnifying Glass Icon */
.search-icon {
    position: absolute;
    top: 50%;
    left: 20px; /* Position the icon inside the padding area */
    transform: translateY(-50%);
    color: #a7a9af; /* Default icon color */
    font-size: 1rem;
    pointer-events: none; /* Makes the icon unclickable */
}

.hours-icon {
    position: absolute;
    top: 50%;
    left: 15px; /* Position the icon inside the padding area */
    transform: translateY(-50%);
    color: #a7a9af; /* Default icon color */
    font-size: 1rem;
    pointer-events: none; /* Makes the icon unclickable */
}

.dollar-icon {
    position: absolute;
    top: 50%;
    left: 15px; /* Position the icon inside the padding area */
    transform: translateY(-50%);
    color: #a7a9af; /* Default icon color */
    font-size: 1rem;
    pointer-events: none; /* Makes the icon unclickable */
}
.clear-icon {
    position: absolute;
    top: 50%;
    right: 25px;
    transform: translateY(-50%);
    color: #6f42c1; /* Purple color for clear icon */
    font-size: 1.3rem;
    cursor: pointer;
    display: none; /* Hidden by default */
}

/* Show clear icon when there is text in the input */
.pc-input:not(:placeholder-shown) + .clear-icon {
    display: inline; /* Show clear icon only when input has text */
}

/* Responsive Layout for Cards */
@media (max-width: 992px) {
    #content {
        /*padding: 60px 15px;*/
    }
}


.nav-photo {
    font-size:12px;
}
.nav-info {
    margin:0 0 0 20px;
    font-size: 12px;
    letter-spacing: 1px;
    font-weight: 500;
    color: #9faffa !important;
}

.employee-nav li {
    list-style:none;
    padding:27px !important;
    border-bottom:solid 1px #eff0f1;
    font-weight: 500;
}
.employee-nav li:first-child {
    border-top: solid 1px #eff0f1;
}
.employee-nav li p {
    color:#80848c;
    font-size: 13.2px;
    line-height: 20px;
    padding: 5px 0px 05px;
    font-weight: normal;
}
.employee-nav li.active {
    background-color:#eef2fe;
    color:#4F46E5;
    
}

.employee-nav li.active i.nav-icon {
   color:#4f46e5;
}

.employee-nav li:hover {
    cursor:pointer;
    background-color:#f8fafc;
}

.util-nav {
    border-right:solid 1px #d5dce2;
    max-width: 340px;
    min-width: 290px;
    position: fixed;
    overflow: scroll;
}

#subNav h3 { font-weight: 700; margin-top:10px; }
.util-content h4 { color:#000; font-weight: 600; margin-top:12px; }

.status-indicator {
    width: 10px;
    height: 10px;
    background-color: #33cc33;
    border-radius: 50%;
    margin-top: 4px; /* To vertically align with text */
}
.util-content {
    font-weight: normal;
    font-size:14px;
    color:#7b7979;
   
}

.util-content .form-group label { 
    color:black; 
margin:25px 0 7px 0;
    font-weight:500;
}

.util-content input, .util-content select {
    width: 100%;
    padding: 12px 5px 12px 12px; /* Extra left padding for icon */
    font-size: 14px;
    border: 2px solid #e4e4e4;
    border-radius: 7px;
    outline: none;
    transition: border-color 0.3s ease;
}

.util-content textarea {
    width: 100%;
    padding: 12px 15px 12px 15px; /* Extra left padding for icon */
    font-size: 14px;
    border: 2px solid #e4e4e4;
    border-radius: 7px;
    outline: none;
    transition: border-color 0.3s ease;
}
.util-content input:focus, .util-content textarea:focus, .util-content select:focus {
 border-color: #9cabdd; /* Purple border on focus */
    box-shadow: 0 0 0 2px rgba(111, 66, 193, 0.2); /* Optional focus shadow */
}

.util-content input::placeholder {
    color: #B8B8B8;
}

.btn-cancel {
    border: solid 1px #abaaaa;
    border-radius: 25px;
    padding: 9px 35px;
    font-size: 14px;
    color:#3a3838; 
    text-decoration:none;
    
}
.btn-cancel:hover {
    background:#edf0f3;
}
.btn-main {
    border-radius: 25px;
    padding: 9px 35px;
    font-size: 14px;
    color:#FFFFFF; 
    text-decoration:none;
    background:#4f46e5;
}
.btn-main:hover {
    background:#3229c6;
}

h6 { color:#545252; }

.pay-summary {
    background: #4859f2;
    color:white !important;
    text-align: right;
    font-size: 13px;
    font-weight:300 !important;
    /* margin-right: -.75rem; */
    /* z-index: 20000; */
}
.pay-summary:hover {
background: #4859f2 !important;
    cursor:default !important;
}
.pay-summary strong {
    font-size: 16px;
    font-weight:500 !important;
}

.form-group .fa-sort {
    display:block;
    position:absolute;
    left: -10px; /* Adjust for the first icon */
    bottom:14px;
    color:#c3c0c0;
    font-size:16px;
    cursor:pointer;
}

.table-content {
    background:white;
    padding:20px;
    border: 1px solid #fafafa;
    border-radius: 15px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.table-content table {
    width:100%;
    color:#333;
}
.table-content th {
    font-weight:500;
    padding:24px 10px;
}
.table-content td {
    font-weight:normal;
    border-top: solid 1px #e1e2e2;
    padding:20px 10px;
}
.table-content td a {
    text-decoration:none;
}
.table-content td strong {
    font-weight:500;
}

.table-totals {
    border-top:solid 2px #333;
}

.util-content .table-content input {
    padding: 6px 15px 6px 50px !important; 
}

.table-pill {
    padding: 3px 10px;
    font-size: 0.7rem;
    border-radius: 12px;
    font-weight: 500;
}

#reportrange {
    cursor: pointer;
    padding: 10px 15px;
    border: 1px solid #D6D8FB;
    background: #fafbff;
    width: 320px;
    color: #4963d4;
    border-radius: 5px;
    font-size: 12px;
}

.daterangepicker .ranges li.active {
    background-color: #4f46e5 !important;
}
.daterangepicker .drp-buttons .btn {
    margin-left: 8px;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 20px !important;
}
.daterangepicker td.active, .daterangepicker td.active:hover {
    background-color: #4f46e5 !important;
}
.daterangepicker td.in-range {
    background-color: #ecefff !important;
}

.sent-pill {
    border-radius: 50px; /* Gives it the pill shape */
    white-space: nowrap; /* Prevents text wrapping */
    font-weight: 500;    /* Optional: Adjust as needed for font styling */
    background-color: #bff7b2; /* Example color for pill background */
    color: #2b8f42; 
    padding: 5px 30px !important;
    width:245px;
    margin-left:10px;
    font-size:12px;
}

/* Custom Scrollbar for Webkit Browsers (Chrome, Safari, Edge) */
.util-nav::-webkit-scrollbar {
    width: 8px; /* Width of the scrollbar */
}

.util-nav::-webkit-scrollbar-track {
    background: #f0f0f0; /* Track color */
}

.util-nav::-webkit-scrollbar-thumb {
    background: #f1f1f1; /* Scroll thumb color */
    border-radius: 4px; /* Rounded corners for the thumb */
}

.util-nav::-webkit-scrollbar-thumb:hover {
    background: #ededed; /* Darken color when hovered */
}

/* Optional for Firefox */
.util-nav {
    scrollbar-width: thin; /* Makes the scrollbar thin */
    scrollbar-color: #f4f7fb #fefeff; /* Thumb color and track color */
}

/* Custom Scrollbar for Webkit Browsers (Chrome, Safari, Edge) */
#leftNav::-webkit-scrollbar {
    width: 8px; /* Width of the scrollbar */
}

#leftNav::-webkit-scrollbar-track {
    background: #1c2636; /* Track color */
}

#leftNav::-webkit-scrollbar-thumb {
    background: #3a475e; /* Scroll thumb color */
    border-radius: 4px; /* Rounded corners for the thumb */
}

#leftNav::-webkit-scrollbar-thumb:hover {
    background: #555; /* Darken color when hovered */
}

/* Optional for Firefox */
#leftNav {
    scrollbar-width: thin; /* Makes the scrollbar thin */
    scrollbar-color: #3a475e #1c2636; /* Thumb color and track color */
}

.btn-calculate {
    background:#5dd418;
}
.btn-calculate:hover {
    background:#4cb90d;
}
.cards-container h5 {
    font-size: 18px;
}
img.screenshot {
    display: block;
    margin: 20px auto;
    border: 15px solid white;
    border-radius: 15px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    max-width: 90%;
}
.run-input {
    max-width:170px;
}

.login {
    background:#FFF;
}
.login-left {
    background:#e4f3f6 !important;
}
.employee-item {
    display: flex;
    align-items: flex-start; /* Align items at the top */
    /* margin-bottom: 1rem; */ /* Add spacing between items */
}

.icon-text-wrapper {
    display: flex;
    gap: .25rem; /* Space between the icon and text */
}

.util-nav .icon-container {
    flex-shrink: 0; /* Prevent icon from resizing */
    align-items: flex-start; /* Align icon at the top */
    font-size: 1.5rem; /* Adjust icon size */
    padding:12px 0 0 0;
}

.text-container {
    flex-grow: 1; /* Allow text to grow and take remaining space */
    line-height: 1.5;
}

.text-container p {
    margin: 0; /* Reset paragraph margins for consistent spacing */
}

#timer {
    position: sticky;
    bottom: 0;
    padding: .5rem 20px .5rem 0;
    z-index: 10000;
    color: #1c97ac;
    font-size: 10px;
    text-transform: uppercase;
    text-align: right;
    user-select: none;
}

/* Overlapping images */
  .image-stack {
    display: flex;
    position: relative;
  }

  .overlapping-img {
    width: 60px; /* Adjust size if needed */
    height: 60px; /* Make all images square */
    border: 5px solid #ffffff;
    border-radius: 50%; /* Optional: Make them circular */
    margin-left: -20px; /* Creates the overlap effect */
    position: relative;
    z-index: 1;
  }

  /* Ensure the first image does not overlap to the left */
  .overlapping-img:first-child {
    margin-left: 0;
  }
.auth-left {
    max-width: 550px;
    color:#727272;
}
.auth-left h2 {
    font-size: 42px;
    font-family: "Inter", serif;
    font-weight: 800;
    color: #2d2e2f;
    line-height: 45px;
    margin: 50px 0 30px 0;
}
        
        .form-signin {
            width:100%;
            max-width:380px;
        }
        .form-signin h2 {
            font-size: 30px;
    font-family: "Inter", serif;
    font-weight: 800;
        }
        
        .form-signin a {
            text-decoration:none;
        }
        
        .text-purple {
            color: #212323;
        }
        .text-purple a {
            color: #000000;
            text-decoration:none;
            font-weight: bold;
        }

#subNav ul {
	list-style:none;
	padding:12px 20px; 
}
#subNav ul li { 
	font-weight:500;
	font-size:.95rem;
	padding:2px;
}
#subNav ul li a { 
	text-decoration:none; 
	color:#4F46E5; 
}
#subNav ul li a:hover { 
	color:#4F46E5; 
} 
#subNav ul li ul {
	list-style:none;
	padding:5px 20px 10px; 
}
#subNav ul li ul li a { 
	text-decoration:none; 
	font-weight:normal;
	color:#706c6c; 
}
#subNav ul li ul li a:hover { color:#4F46E5; } 

/* Custom modal dialog with a fixed width */
#previewPayroll .modal-dialog {
  max-width: 800px; /* Fixed width */
  width: 100%; /* Ensure it respects smaller screens */
  margin: 1.75rem auto; /* Center the modal vertically */
}

#previewPayroll .modal-content {
  overflow: auto; /* Handle content overflow */
}

#previewPayroll .modal-header {
    background-color:#4F46E5;
}

#paystub-content {   
    padding: 15px;
}
.preview-1 {
    padding: 40px !important;
    font-family: "Courier Prime", monospace;
    color: rgb(58, 56, 56);
    font-size: 13px;
    line-height: 21px;
    align-self: flex-start; /* Align to the start, matching content height */
}


.highlight {
	background:#fbffa7;
}
hr.dashed-line {
	border: none;
	border-bottom: dashed 1px #000000 !important;
	opacity: unset;
    background-color: unset;
}

.stub-total {
	border-top: solid 1px #000000 !important;
	border-bottom: solid 1px #000000 !important;
	padding: 7px 0px 7px 0;
	margin-top: 7px;
}

.stub-total-no-top {
	border-top: solid 1px #FFF !important;
	border-bottom: solid 1px #000000 !important;
	padding: 7px 0px 7px 0;
}

.text-information {
	max-width:900px !important;
color:#312f2f;
}

.text-information p {
	line-height:1.8rem;
	color:#312f2f;
}

.text-information h2 {
	color:#312f2f;
	font-size:24px;
	margin:60px 0 20px;
	font-weight:700;
	
}
.text-information h2:first-of-type {
    margin-top: 0; /* Remove the top margin for the first h3 */
}
.text-information h3 {
	
	color:black;
	font-size:18px;
	margin:40px 0 20px;
	font-weight:600;

}
.text-information ul li {
	padding:2px;
	line-height:1.8rem;
}

.sticky-feedback-bottom {
    position: fixed;
    bottom: 80px;
	width: 250px;
	color:white;
    background-color: #38cc31;
    padding: 12px;
    z-index: 1000;
	font-style:italic;
    margin-left: -32px;
    display:none;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2); 
}

.sticky-bottom {
    position: fixed;
    bottom: 0;
    background-color: white;
    border-top: 1px solid #e8e8e8;
    padding: 15px; /* Adjust padding as needed */
    z-index: 1000; /* Ensures it stays above other elements */
    width: 100%;
    margin-left: -42px;
}

.content-3 {
    display: flex;
    flex-direction: column; /* Default layout for narrower screens */
}

.main-content {
    flex: 1; /* Take up available space */
}

.widescreen-paystub {
    flex: 1; /* Equal width for widescreen layout */
    background-color: #FFF; /* Example background color */
    border-radius: 5px;
    /* padding: 25px 25px 40px; */ /* Add padding for content */
    display: none; /* Hide by default */
}

/* Show the widescreen section when the screen width is greater than 1800px */
@media (min-width: 1960px) {
    .content-3 {
        flex-direction: row; /* Arrange side by side */
        gap: 20px; /* Optional gap between columns */
    }
    .widescreen-paystub {
        display: block; /* Make it visible */
    }
}
.form-check-input {
    width: 1.55rem !important;
    height: 1.55rem;
    cursor: pointer;
    padding: 0px !important;
}

.form-check-label {
    font-size: 1em;
   margin:6px 0px 0px 10px !important;
    cursor: pointer;
	font-weight:normal !important;
}