table {
    font-family: Verdana;
    border-collapse: collapse;
    width: 100%;
    align-items: center;
    justify-content: center;
}

th {
    border: 1px solid #f0f0f0;
    text-align: center;
    padding: 8px;
}

.doodle {
    /* border: 1px solid #f0f0f0; */
    padding: 8px;
    margin-left: 20px;
}

.td-left {
    border: 1px solid #f0f0f0;
    text-align: left;
    padding: 8px;
    margin-left: 20px;
}

.fw-bold {
    border: 1px solid #f0f0f0;
    padding: 8px;
    margin-left: 20px;
}

.td-status {
    border: 1px solid #f0f0f0;
    padding: 8px;
    /* margin-left: 20px; */
}

.custom-input-width {
    width: 50% !important;
}

.custom-checkbox.custom-checkbox-size {
    width: 38px; /* Set the desired width */
    height: 38px; /* Set the desired height */
    margin-top: 0; 
    /* Adjust the top margin for vertical alignment */
}

.dark-mode {
  background-color: rgb(58, 48, 48);
  color: rgb(255, 255, 255);
}

/* Define styles for the dark mode */
.dark-mode .modal-content {
    background-color: #000000; /* Dark background color */
    color: #fff; /* Light text color */
}

/* Define styles for the dark mode */
.dark-mode .doodle {
    background-color: rgb(58, 48, 48); /* Dark background color */
    color: #fff; /* Light text color */
}

/* Define styles for the dark mode */
.dark-mode .table-group-divider {
    color: #ffffff; /* Light text color */
}

.dark-mode .footer {
    color:#f0f0f0
}

.dark-mode .body {
    background-color: rgb(58, 48, 48);
    color: rgb(255, 255, 255);
}

.custom-button {
    font-family:Verdana !important;
    width: 125px;
}

.btn-refresh {
    padding-top: 30px;
}

.status-width {
    width: 88px;
    background-color: #77a08c;
    align-items: center;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: white;
    text-align: center;
    white-space: nowrap;
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
}

tbody tr:hover{
    background-color: #faffe2;
    color:black;
} 

tbody tr[selected], tbody tr[selected]:hover{
    background-color: #dfd4ff;
    color:black;
}

/* table#main-list th:nth-child(1) {
    width: 10%; 
}

table#main-list th:nth-child(2) {
    width: 20%; 
}

table#main-list th:nth-child(3) {
    width: 10%; 
} */

/* @media queries for responsive table widths */
/* Default styles for small screens */
@media (max-width: 767px) {
    table#main-list th:nth-child(1) {
        width: 15%; /* Adjust as needed */
    }
    table#main-list th:nth-child(2) {
        width: 30%; /* Adjust as needed */
    }
    table#main-list th:nth-child(3) {
        width: 10%; /* Adjust as needed */
    }
    .container-fluid.responsive {
        max-width: 80%; /* Adjust the max-width for small screens */
    }
}

/* Styles for medium screens */
@media (min-width: 768px) and (max-width: 991px) {
    table#main-list th:nth-child(1) {
        width: 15%; /* Adjust as needed */
    }
    table#main-list th:nth-child(2) {
        width: 30%; /* Adjust as needed */
    }
    table#main-list th:nth-child(3) {
        width: 15%; /* Adjust as needed */
    }
    .container-fluid.responsive {
        max-width: 56%; /* Adjust the max-width for small screens */
    }
}

/* Styles for medium-plus screens */
@media (min-width: 992px) and (max-width: 1199px) {
    table#main-list th:nth-child(1) {
        width: 15%; /* Adjust as needed */
    }
    table#main-list th:nth-child(2) {
        width: 30%; /* Adjust as needed */
    }
    table#main-list th:nth-child(3) {
        width: 15%; /* Adjust as needed */
    }
    .container-fluid.responsive {
        max-width: 52%; /* Adjust the max-width for small screens */
    }
}

/* Styles for large screens */
@media (min-width: 1200px) {
    table#main-list th:nth-child(1) {
        width: 10%; /* Adjust as needed */
    }
    table#main-list th:nth-child(2) {
        width: 20%; /* Adjust as needed */
    }
    table#main-list th:nth-child(3) {
        width: 10%; /* Adjust the percentage as needed */
    }
    .container-fluid.responsive {
        max-width: 48%; /* Adjust the max-width for small screens */
    }
}