body{
    zoom: 0.8;
    height: 125vh; 
}

body, select{
    font-size: 14px !important;
}
.form-control, .form-select{
    color: #333 !important;
}
.btn , .dropdown label{
    font-size: 12px !important;
}
.nav-item.active .nav-link{
    color: #3a57e8!important;
}

.nav-link{
    display: flex;
    justify-content: start;
    align-items: center;
}

.datatable th, th{
    text-transform: none!important;
    text-align: left !important;
}
.dataTables_length {
    text-align: right !important;
}
.dataTables_length {
    float: right !important; /* Moves to the right */
    margin-bottom: 10px; /* Adds spacing */
}

.dataTables_info {
    margin-top: 10px; /* Adds some spacing between the table and the info text */
}
.badge{
    text-transform: none!important;
}
.datatable td{
    max-width: 300px; /* Adjust max-width as per your design */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; /* Prevent text wrapping */
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}

label{
    color: #000;
    font-weight: 500;
    margin-bottom: 10px;
}

.loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 1);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.shaking-logo {
    width: 250px; /* Adjust the size of the logo */
    animation: shake 0.6s infinite; /* Slower shake */
}

@keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }
    25%, 75% {
        transform: translateX(-5px); /* Less intense shake */
    }
    50% {
        transform: translateX(5px); /* Less intense shake */
    }
}

.d-none {
    display: none;
}

.datatable input[type="checkbox"] {
    width: 1em;
    height: 1em;
}

.disabled{
    background-color: #cccccc; /* Gray background */
    color: #666666; /* Light text color */
    cursor: not-allowed; /* Change cursor to indicate the button is disabled */
    border-color: #aaaaaa; /* Optional: change border color */
    opacity: 0.6; 
}
.btn-info:hover, .btn-info:focus {
    color: white;
    background-color: #09a5c7!important; /* Darker shade */
    border-color: #09a5c7!important;
}
.small-column {
    width: 30px!important;
}
.md-column{
    width: 150px !important;
    text-align: start!important;
}
.lg-column{
    width: 250px !important;
    text-align: start !important;
}

.nav-tabs{
    margin: 0;
}
.nav-tabs .nav-link {
    border-radius: 5px 5px 0 0;
    font-size: 16px!important;
    color: #555;
    font-weight: 600;
}
.nav-tabs .nav-link.active {
    border: 1px solid #dee2e6;
    background-color: #3a57e8;
    color: white;
    box-shadow: none;
}

/* Add padding and styling to tab content */
.tab-content {
    border: 1px solid #f4f4f4;
    background-color: #F5F6FA;
    border-radius: 0 0 10px 10px;
}
.btn-font{
    font-size: 14px!important;
    font-weight: 500;
}

.custom-radio {
    width: 1rem;  /* Adjust width */
    height: 1rem; /* Adjust height */
    margin-right: 0.5rem; /* Space between the radio and label */
}

.form-check-label {
    font-size: 16px; /* Optional: adjust label size for balance */
}

.filterColumns .dropdown-menu .dropdown-item {
    font-size: 16px!important; /* Increase font size */
    display: flex;
    align-items: center;
    margin: 0;
}

.filterColumns .dropdown-menu .dropdown-item input[type="checkbox"] {
    width: 1rem; /* Increase checkbox size */
    height: 1rem; /* Increase checkbox size */
    margin-right: 0.5rem; /* Add spacing between checkbox and text */
}
.custom-select {
    font-size: 0.875rem;  /* Smaller text size */
    padding: 0.25rem 0.5rem;  /* Reduce padding for a smaller height */
    height: 30px;  /* Set specific height */
    width: 150px;
}

.image-container {
    width: 300px;
    height: 250px;
    overflow: hidden; /* Ensures that the image doesn't overflow the container */
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f8f9fa; /* Optional: Add a background color */
}

.image-container img {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover; /* Ensures the image fills the container while maintaining its aspect ratio */
}

.ts-control {
    padding: 10px!important;
    background-color: #fff;
    color: #333!important;
    border-radius: 5px!important;
    font-size: 14px!important;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* IE and Edge */
}

.ts-dropdown {
    max-height: 200px;
    overflow-y: auto;
}

.ts-dropdown::-webkit-scrollbar {
    display: none!important; /* Chrome, Safari, Opera */
}

.ts-dropdown [data-selectable].option{
    padding: 10px !important;
    font-size: 14px!important;
}