body {
    font-family: 'Poppins', sans-serif;
    /* font-size: clamp(10px, 3vw, 14px); */
    font-size: clamp(12px, 4vw, 16px);
}

.sidebar {
    width: 250px;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    overflow-y: auto;
    box-shadow: 5px 5px 5px #0F172A33;
    background-color: #FFFFFF;
    /* font-size:small; */
}

.main-content {
    margin-left: 250px;
    /* font-size: clamp(10px, 3vw, 14px); */
    font-size: clamp(12px, 4vw, 16px);
}

.navbar {
    box-shadow: 5px 5px 5px #0F172A33;
    background-color: #FFFFFF; 
}

.nav-link:hover {
    background-color: #f7f2f2;
    border-radius: 5px;
}

.logo-img {
    width: 50%; 
    height: auto;
    max-width: 100px; 
}

.slot-container {
    background-color: #F3F3F5;
    min-height: 100vh; 
    padding: 0px 20px;
}

.page-wrapper {
    height: 100%; 
}

.nav-item a:hover {
    background-color:#D1E4FF;
    color: #4084E7; /* Optional: Change text color for better contrast */
    border-radius: 5px; /* Optional: Adds rounded corners */
    transition: background-color 0.3s ease; /* Smooth transition effect */
}

.nav-item{
    color:#64748B;
}

.page-title{
    font-family: Poppins;
    font-weight: 600;
    line-height: 22px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #0B4564;
    padding-top: 5px;
    padding-bottom: 5px;
}
/* card */
.card-header-custom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #ffffff; 
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid #ffffff; 
    font-family: Poppins, sans-serif;
    font-size: 10px; 
}
.title-container {
    font-family: Poppins;
    font-size: 18px;
    font-weight: 600;
    line-height: 22px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #0B4564;
    padding-top: 5px;
    padding-bottom: 5px;
    display: flex;
    align-items: center;
    gap: 10px; /* Space between elements */
}
.vertical-line {
    border-left: 2px solid #0d6efd; /* Vertical line style */
    height: 20px; /* Adjust height to match the title */
}
.date-range {
    font-size: 15px;
    font-weight: 300;
    background-color: #2074A0; 
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 0.25rem;
 }
.action-buttons button {
    margin-left: 5px;
}
  
 /* Custom breadcrumb style */
 .page-breadcrumb {
    margin-left: 250px;
    padding-left: 20px;
    padding-top: 20px;
    padding-bottom: 10px;
    background-color: #F3F3F5;
}
.breadcrumb {
  background-color: #F3F3F5; /* Light background color */
  border-radius: 5px;         /* Rounded corners */
  padding: 0px 0px;         /* Padding around breadcrumb items */
  font-size: clamp(10px, 3vw, 14px);
}

.breadcrumb-item {
  font-size: small;           /* Custom font size for items */
  font-weight: 400;          /* Slightly bold text */
}

.breadcrumb-item a {
  color: #007bff;            /* Custom link color */
  text-decoration: none;     /* Remove underline */
}

.breadcrumb-item a:hover {
  text-decoration: underline; /* Underline on hover */
  color: #007bff;             /* Change color on hover */
}

.breadcrumb-item.active {
  color: #6c757d;            /* Color for the active breadcrumb item */
}

/* Custom separator between breadcrumb items */
.breadcrumb-item + .breadcrumb-item::before {
  content: "›";              /* Use a custom separator */
  color: #0B4564;            /* Separator color */
  margin: 0 10px;
}

.btn-outline-dark{
  background-color: transparent  !important;
  border-color: 5px solid #0B4564 !important;
  color: #0B4564 !important;
}
.btn-outline-dark:hover {
  background-color: #0B4564 !important;     /* Blue background on hover */
  color: white !important;                  /* White text on hover */
  border-color: #0B4564 !important;         /* Keep blue border on hover */
}
.btn-main{
  background-color: #0B4564 !important;
  border-color: #0B4564 !important;
  color: white;
}
.btn-main:hover {
  background-color: #093b4d !important; /* Darker shade on hover */
}

/* tabs */
.custom-tabs .nav-link {
  font-weight: 600; /* Semi-bold style */
  border-radius: 0.5rem; /* Rounded corners */
  color: #374151; /* Default text color */
  background-color: #f9fafb; /* Light background */
  border: none;
  margin-right: 5px;
  padding: 0.5rem 1rem;
}
.custom-tabs .nav-link.active {
  color: #1d4ed8; /* Active text color */
  background-color: #dbeafe; /* Active background color */
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Shadow for active tab */
}
.custom-tabs .nav-link:hover {
  background-color: #e5e7eb; /* Hover effect */
}
.tab-content {
  background-color: #ffffff; /* White background */
  border-radius: 0.5rem; /* Rounded corners for the content */
  padding: 1.5rem; /* Add padding inside the content area */
  border: 1px solid #e5e7eb; /* Optional: Add a subtle border */
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Optional: Add a shadow */
}
.text-blue{
  color: #0B4564;
}

.form-select, .form-control, .btn {
  font-size: small;
}

.validation-error {
  font-size: 0.8rem; /* Adjust as needed */
}

.custom-outline {
  border: 2px solid #0B4564; /* Replace with your preferred color */
}