.padding_card{
    padding:20px;
}
@media (min-width: 200px) and (max-width: 768px) {
    .card-body p {
        font-size: 18px;
        color: #fff;
    }

    .card-body h6 {
        font-size: 14px;
        color: #ffffffcf;
    }
    .filter-date {
        display: block;
        
        
      }
      .daterange-picker input{
width:100% !important;
      }
      .container-fluid {
        padding: 0px 15px !important;
    }



}

@media (min-width: 200px) and (max-width: 991px) {

    .cafe-column .col-md-3 {
        width: 50%;
    }
}

@media (min-width: 768px) and (max-width: 800px) {
    .card-body p {
        font-size: 15px;
        color: #fff;
    }

    .card-body h6 {
        font-size: 11px;
        color: #ffffffcf;

    }

    .card-body .table-caption {
        font-size: 11px;
        color: #ffffffcf;
        display: table-caption;
        margin-bottom: -4px;
    }

    .card-body h5 {
        font-size: 14px;
        color: #fff;
    }

    /* .cafe-column .col-md-3 {
        width: 20%;
    } */
}


@media (min-width: 800px) and (max-width: 1100px) {
    .card-body p {
        font-size: 16px;
        color: #fff;
    }

    .card-body h6 {
        font-size: 12px;
        color: #ffffffcf;

    }

    .card-body h5 {
        font-size: 15px;
        color: #fff;
    }

    .card-body .table-caption {
        font-size: 13px;
        color: #ffffffcf;
        display: table-caption;
        margin-bottom: -6px;
    }

}

@media (min-width: 1100px) and (max-width: 1200px) {
    .card-body p {
        font-size: 22px;
        color: #fff;
    }

    .card-body h6 {
        font-size: 14px;
        color: #ffffffcf;

    }

    .card-body h5 {
        font-size: 17px;
        color: #fff;
    }

    /* .card-body .table-caption {
        font-size: 13px;
        color: #ffffffcf;
        display: table-caption;
        margin-bottom: -6px;
    } */

}



@media (min-width: 200px) and (max-width: 500px) {

    .cafe-column .col-md-3 {
        width: 100%;
    }

    .card.card-inner .bor-right {
        border-right: 1px solid #00000029;
        margin-left: 9px;
    }


}

@media (min-width: 200px) and (max-width: 576px) {

    .form-control,
    .form-select {
        font-size: 13px !important;
        font-family: inherit;
        border: 1px solid #d3c1f5;
    }

    .panel-body .filter-date {
        display: flex;
        justify-content: flex-end;
        margin-right: -31px;
    }

    .panel .camp-name {
        margin-right: 6px;
        margin-top: 16px;
        font-size: 15px;
    }

    .panel .camp-filt {
        margin-right: 9px;
        margin-top: 10px;
        padding-left: 14px;
        padding-right: 36px;
        padding-top: 8px;
        padding-bottom: 8px;
        border-radius: 30px;
        width: 73%;
    }


    .daterange-picker input {
        background: #673ab7;
        color: #fff;
        border: none;
        text-align: center;
        font-size: 13px;
        font-weight: 400;
        width: 224px;
        height: 34px;
        text-align: center;


        margin-top: 9px;

        border-radius: 5px;
        font-family: inherit;
        margin-bottom: 5px;
        outline: none;
        padding: 18px;
        border-radius: 18px;
    }
}


@media (min-width: 500px) and (max-width: 800px) {

    .card.card-inner .bor-right {
        border-right: 1px solid #00000029;
        margin-left: 0px;
    }




}

@media (min-width: 800px) and (max-width: 991px) {
    .cafe-column .col-md-3 {
        width: 33%;
    }

    .card.card-inner .bor-right {
        border-right: 1px solid #00000029;
        margin-left: 0px;
    }
}

@media (min-width: 992px) and (max-width: 1200px) {
    .cafe-column .col-md-3 {
        width: 33%;
    }

    .card.card-inner .bor-right {
        border-right: 1px solid #00000029;
        margin-left: 0px;
    }
}

@media (min-width: 1200px) and (max-width: 1400px) {
    .cafe-column .col-md-3 {
        width: 25%;
    }

    .card.card-inner .bor-right {
        border-right: 1px solid #00000029;
        margin-left: 0px;
    }
}

@media (min-width: 1400px) and (max-width: 1700px) {
    .cafe-column .col-md-3 {
        width: 20%;
    }

    .card.card-inner .bor-right {
        border-right: 1px solid #00000029;
        margin-left: 0px;
    }
}