html {
  font-size: 80%
}



.form-switch {

    width: 100px;
}
.form-switch .form-check-label .switch-icon-left{
    width: auto;
}
/* for dark theme
.select2-container--default .select2-selection--multiple {
    background-color: #283046 !important;
    border: 1px solid #404656;
    border-radius: 4px;
    cursor: text;
}

.select2-container--classic .select2-results__option[aria-selected=true], .select2-container--default .select2-results__option[aria-selected=true] {
    background-color: #7367f0 !important;
    color: #fff !important;
}

.select2-container--classic .select2-results__option, .select2-container--default .select2-results__option {
    padding: 0.428rem 1rem;
    background: #283046;
   color:#b4b7bd !important;
}

.select2-container--default .select2-selection--single {
     background-color: #283046 !important;
    border: 1px solid #404656;
    border-radius: 4px;
}
*/
.horizontal-menu .header-navbar.navbar-fixed {

    left: 0px;
}

.badge:empty {
    display: none !important;
  }

  .form-switch .form-check-label .switch-icon-right, .form-switch .form-check-label .switch-text-right {
    left: 25px;
    opacity: 1;
    top: 0;
    transform: translateX(0);
    transition: opacity .08s ease, transform .15s ease;
    width: 100%;
}

#filter-form .row {
    display: flex;
    flex-wrap: wrap;
}

/* General styles for responsive filter and search */
@media (max-width: 768px) {
    /* Ensure the DataTable itself is responsive */
    table.dataTable {
        width: 100%;
        overflow-x: auto;
    }

    /* Adjust search input and filter form layout */
    #filter-container {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin: 10px 0;
    }
    #filter-form .row {
        display: none; /* Hide the row by default */
    }

    #filter-form h4 {
        cursor: pointer; /* Change cursor to indicate clickable */
        background-color: #313131; /* Optional styling */
        color: white !important;
        padding: 10px;
        border-radius: 5px;
        margin-bottom: 10px;
        position: relative; /* For pseudo-element */
    }

    /* Add a toggle icon (triangle) using pseudo-element */
    #filter-form h4::after {
        content: '\25BC'; /* Downward triangle icon */
        font-size: 12px;
        color: white;
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        transition: transform 0.3s ease;
    }



    /* Rotate the icon when expanded */
    #filter-form:has(.row:focus-within) h4::after {
        transform: translateY(-50%) rotate(180deg);
    }

    #DataTables_Table_0_length{
        display:none;
    }
    /* Table layout for small screens */
    .dataTables_wrapper {
        overflow-x: auto;
    }

    .dataTables_filter {
        margin-bottom: 10px;
        text-align: left;
    }

    .dataTables_filter label {
        width: 100%;
        display: block;
    }

    .dataTables_filter input {
        width: 100%;
        padding: 8px;
        font-size: 14px;
    }

    .dt-action-buttons {
      display:block !important;
    }

    .table-responsive div.dataTables_wrapper div.dataTables_filter input {
        margin-left: .5em;
        display: inline-block;
        width: 86% !important;
    }

    #tableCategory_filter, #DataTables_Table_0_filter input{
        width: 86% !important;
    }

    .rmobile button {
        width: 100% !important;
        margin-top: 10px;
        padding:0.8rem !important;
    }

    .dataTables_length {
        display:none;
    }
}