/* 1. EXTRA SMALL DEVICES (Portrait phones) */
@media (min-width: 0px) and (max-width: 575.98px) {

    /* Your CSS for phones goes here */
    .modal .modal-header,
    .modal .modal-body,
    .card .card-header,
    .card .card-body {
        padding: var(--ct-space-xs);
    }

    .navbar .navbar-wrapper {
        max-width: calc(100% - var(--ct-space-lg));
    }

    .navbar .navbar-brand {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .modal .modal-footer,
    .card .card-footer {
        padding: var(--ct-space-xs) var(--ct-space-xs) var(--ct-space-sm) var(--ct-space-xs);
    }

    .plan-filters {
        gap: var(--ct-space-xxs);
        margin-bottom: var(--ct-space-xxs);
    }

    .card-header .ct-header-flex-box {
        flex-wrap: wrap;
    }

    .card-header .ct-flex-box-2.ct-max-two-elements {
        flex-wrap: nowrap;
    }

    .dataTables_wrapper .dataTables_length.dataTables_length,
    .dataTables_wrapper .dataTables_filter.dataTables_filter {
        float: left; /* or your desired value */
    }

    /* .section-image .footer,
    .section-image .footer a {
        color: var(--black);
    } */

}

/* 2. SMALL DEVICES (Landscape phones) */
@media (min-width: 576px) and (max-width: 767.98px) {
    /* .section-image .footer,
    .section-image .footer a {
        color: var(--black);
    } */
}


/* 3. MEDIUM DEVICES (Tablets) */
@media (min-width: 768px) and (max-width: 991.98px) {

}

/* 4. LARGE DEVICES (Desktops and small laptops) */
@media (min-width: 992px) and (max-width: 1199.98px) {


}

.plan-filters .filter-box.filter-box--compact {
    margin-left: 0;
}

@media (max-width: 575.98px) {
    .plan-filters .filter-box,
    .plan-filters .filter-box.filter-box--compact {
        width: 100% !important;
        margin-left: 0 !important;
    }
    .plan-filters .filter-box .btn,
    .plan-filters .filter-box .ct-primary-btn {
        width: 100% !important;
    }
}

@media (min-width: 576px) and (max-width: 767.98px) {
    .plan-filters .filter-box,
    .plan-filters .filter-box.filter-box--compact {
        width: 100% !important;
        margin-left: 0 !important;
    }
    .plan-filters .filter-box .btn,
    .plan-filters .filter-box .ct-primary-btn {
        width: 100% !important;
    }
}