body {
color: #008e94;
/* default text color */
}


.logo-title img {
width: 50%;
}


.sidebar-base .nav-item .nav-link .item-name {
font-size: 14px;
line-height: 20px;
font-weight: 400;
color: #000;
}



.sidebar.sidebar-default .nav-link:not(.static-item).active,
.sidebar.sidebar-default .nav-link:not(.static-item)[aria-expanded=true] {
background: #E8F0FE;
color: #000000;
box-shadow: none;
}

.nav {
background: #F8FAFD;
}

.sidebar {
background: #F8FAFD;
}

.card-title {
font-size: 18px;
font-weight: 800;
color: #202124;
}

.form-label {
margin-bottom: .5rem;
color: #000 !important;
font-size: 13px;
font-weight: 500;
line-height: 16px;
}

.card {
box-shadow: none;
border: 1px solid #ddd;
}

.avatar-50 {
height: 30px;
width: 30px;
min-width: 30px;
}

.container-fluid.content-inner {
padding: 15px;
}

.footer {
font-size: 14px;
background: #f8fafd;
color: #000;
}


.bg-primary {
--bs-bg-opacity: 1;
background-color: rgb(58 87 232) !important;
}


.btn-primary:hover {
background: #000;

}

.btn.btn-primary {
background: #0e82fd;
color: #fff;
}

.btn-secondary {
background: blue;
color: #fff;

}

.btn-secondary:hover {
background: #000;

}

.form-label {
margin-bottom: .5rem;
color: #000 !important;
}

.form-control {
padding: 5px 10px;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #000;
appearance: none;
background-color: #f8fafd;
background-clip: padding-box;
border: 1px solid #ddd;
border-radius: 4px;
}

.form-select {
display: block;
width: 100%;
padding: .5rem 3rem .5rem 1rem;
font-size: 14px !important;
font-weight: 400;
line-height: 1.5;
color: #000;
appearance: none;
background-color: #f8fafd !important;
background-image: var(--bs-form-select-bg-img), var(--bs-form-select-bg-icon, none);
background-repeat: no-repeat;
background-position: right 1rem center;
background-size: 16px 12px;
border: 1px solid #ddd !important;
border-radius: 4px !important;
}

.form-control:focus {
color: #000;
}

.table thead tr th {
text-transform: Capitalize;
letter-spacing: .2px;
background-color: var(--bs-body-bg);
color: #000;
font-size: 14px;
}


element.style {}

.form-select {
-webkit-box-shadow: none;
box-shadow: none;
}

.form-select {
--bs-form-select-bg-img: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e);
display: block;
width: 100%;
padding: .5rem 3rem .5rem 1rem;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #000;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: var(--bs-gray-900);
background-image: var(--bs-form-select-bg-img), var(--bs-form-select-bg-icon, none);
background-repeat: no-repeat;
background-position: right 1rem center;
-webkit-background-size: 16px 12px;
background-size: 16px 12px;
border: var(--bs-border-width) solid var(--bs-border-color);
-webkit-border-radius: var(--bs-border-radius);
border-radius: var(--bs-border-radius);
-webkit-transition: border-color .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;
transition: border-color .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;
-o-transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;
}

.table {
--bs-table-color-type initial: initial;
--bs-table-bg-type: initial;
--bs-table-color-state: initial;
--bs-table-bg-state: initial;
--bs-table-color: #000000;
--bs-table-bg: #ffffff;
--bs-table-border-color: #eee;
--bs-table-accent-bg: transparent;
--bs-table-striped-color: #8a92a6;
--bs-table-striped-bg: rgba(var(--bs-emphasis-color-rgb), 0.05);
--bs-table-active-color: #8a92a6;
--bs-table-active-bg: rgba(var(--bs-emphasis-color-rgb), 0.05);
--bs-table-hover-color: #8a92a6;
--bs-table-hover-bg: rgba(#8a92a6, 0.075);
border-color: var(--bs-table-border-color);
}

.table>:not(caption)>*>* {
padding: 5px 10px;

}

.bg-success {
background-color: rgb(26 160 83) !important;
padding: 5px 10px;
}

.bg-warning {
background-color: rgb(224 79 22) !important;
padding: 5px 10px;
}

.center {
text-align: center;
}


.eye {
background: transparent;
border: none;
position: relative;
left: -35px;
}

.submitbtn {
background: #002C8F;
border: none;
color: #ffffff;
padding: 5px 14px;
border-radius: 4px;
font-size: 14px;
}

.cancelbtn {
background: #f11a00;
border: none;
color: #ffffff;
padding: 5px 14px;
border-radius: 4px;
font-size: 14px;
}

.btn-success {
padding: 5px 14px;
border-radius: 4px;
font-size: 14px;
}

.restbtn {
background: #E04F16;
border: none;
color: #ffffff;
padding: 5px 14px;
border-radius: 4px;
font-size: 14px;
}

.calendarbtn {
background: #0E82FD;
border: none;
color: #ffffff;
padding: 5px 14px;
border-radius: 4px;
font-size: 14px;
}

.pendingbtn {
background: #079AA2;
border: none;
color: #ffffff;
padding: 5px 10px;
font-size: 14px;
}

.resetbtn {
background: #2a2a2a;
border: none;
color: #ffffff;
padding: 5px 10px;
font-size: 14px;
}

.searchbtn {
background: #0e82fd;
border: none;
color: #ffffff;
padding: 5px 10px;
font-size: 14px;
}

.btn-success-icon {
background-color: #6f42c1;
color: white;
padding: 5px 9px;
border-radius: 4px;
font-size: 12px;
}

.btn-primary-icon {
background-color: #3a57e8;
color: white;
padding: 5px 9px;
border-radius: 4px;
font-size: 12px;
}

.btn-danger-icon {
background-color: #c03221;
color: white;
padding: 5px 9px;
border-radius: 4px;
font-size: 12px;
}

#calDays {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 5px;
}

.calendar-day-box {
height: 50px;
/* Adjusted height */
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
overflow: hidden;
width: 100%;
/* Ensure it takes full grid cell width */
font-size: 12px;
/* Reduced font size */
}

.calendar-day-box small {
font-size: 9px;
margin-top: auto;
margin-bottom: 5px;
}

.header-title {
background: #f8fafd;
border: 1px solid #ddd;
padding: 6px 25px;
border-radius: 4px;
}

.rangbtn {
color: #000;
font-size: 12px;
}

.form-select.form-select-sm {
padding: 0 40px 0px 10px;
}

.table-responsive .dataTables_wrapper .row .dataTables_length {
padding-left: 0;
}

.table-responsive .dataTables_wrapper .row .dataTables_length {
padding-left: 0;
color: #000;
font-size: 13px;
}

a {
color: #000;
}

table {
border-collapse: collapse;
width: 100%;
font-size: 14px;
}

th,
td {
padding: 4px;
border: 1px solid #cccccc;
}

tr:nth-child(even) {
background-color: #f2f2f2;
}


.subtitle {
font-size: 16px;
font-weight: 600;
color: #000;
}

/* Compact Appointments Table - No Horizontal Scroll */
#datatable {
font-size: 12px !important;
}

#datatable thead th {
font-size: 12px !important;
padding: 4px 6px !important;
white-space: nowrap;
}

#datatable tbody td {
font-size: 11px !important;
padding: 4px 6px !important;
}

#datatable .badge {
font-size: 10px !important;
padding: 3px 6px !important;
}

#datatable .btn-sm {
padding: 3px 6px !important;
font-size: 11px !important;
}

#datatable .btn-success-icon,
#datatable .btn-primary-icon,
#datatable .btn-danger-icon {
padding: 3px 6px !important;
font-size: 11px !important;
}

#datatable a i {
font-size: 14px !important;
}

/* Alternating row colors - striped table */
#datatable tbody tr:nth-child(odd) {
background-color: #f8f9fa !important;
}

#datatable tbody tr:nth-child(even) {
background-color: #7a2020 !important;
}


/* Active link background color */
.navbar-nav .nav-link.active {
background-color: #3a57e8 !important;
color: white !important;
border-radius: 8px;
}

/* Hover effect for active link */
.navbar-nav .nav-link.active:hover {
background-color: #2a46d8 !important;
}

/* Optional: Change icon color in active state */
.navbar-nav .nav-link.active .icon i,
.navbar-nav .nav-link.active .icon svg path {
color: white !important;
fill: white !important;
}

/* Optional: Change text color in active state */
.navbar-nav .nav-link.active .item-name {
color: white !important;
}
.dataTables_wrapper {
background: transparent !important;
}

/* Table rows ko force color karo */
table#datatable tbody tr {
background-color: #ffffff !important;
}

table#datatable tbody tr:nth-child(even) {
background-color: #f0f4ff !important;
}

table#datatable tbody tr:nth-child(odd) {
background-color: #ffffff !important;
}

/* Hover effect */
table#datatable tbody tr:hover {
background-color: #e3f2fd !important;
}

/* Table cell background bhi override karo */
table#datatable tbody tr td {
background-color: inherit !important;
}

/* Checkbox column ka background fix */
table#datatable tbody tr td:first-child {
background-color: inherit !important;
}

label{
font-size: 14px;
color: #000 !important;
}

/* Scrollbar ki width aur style customize karein */
.main-content::-webkit-scrollbar {
width: 15px !important; /* Scrollbar ki width (default 8px hoti hai) */
}

.main-content::-webkit-scrollbar-track {
background: #f1f1f1; /* Scrollbar track ka color */
border-radius: 10px;
}

.main-content::-webkit-scrollbar-thumb {
background: #888; /* Scrollbar thumb ka color */
border-radius: 10px;
}

.main-content::-webkit-scrollbar-thumb:hover {
background: #555; /* Hover par color */
}

/* Agar poora page ka scrollbar barhana hai */
body::-webkit-scrollbar {
width: 15px !important;
}

body::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 10px;
}

body::-webkit-scrollbar-thumb {
background: #4a90e2;
border-radius: 10px;
}

body::-webkit-scrollbar-thumb:hover {
background: #357abd;
}

/* Firefox ke liye */
* {
scrollbar-width: thick; /* thin, auto, thick */
scrollbar-color: #4a90e2 #f1f1f1; /* thumb color, track color */
}
	

.footer .footer-body {
    padding: .5rem calc(var(--bs-gutter-x, 0.75rem) * 3);
	display: block;
}

p {
    color: #000;
}

a.filebtn {
    background: transparent;
    border: 1px solid #000;
    padding: 5px 10px;
    border-radius: 4px;
}

h2 {
    font-size: 24px;
    font-weight: 800;
    color: #EA018C;
}