@media (max-width: 1199.98px) {

    
    .dahsboard-section-bar{
        flex-direction: column;
    }
    .dahsboard-section-bar .dashboard-right-box {
        min-width: 100%;
        max-width: 100%;
    }
}


@media (max-width: 991.98px) {

    .mb-menu-icon {
        display: block !important;
        margin-right: 15px;
    }
    .sidebar {
        position: fixed;
        left: calc(-1 * 250px);
        z-index: 99;
        border: none;
    }
    .sidebar.active{
        left: 0;
    }
    main{
        min-width: 100%;
        max-width: 100%;
    }
    .ride-details-content .caption-wapper .captio-box.driver-details-box .caption-item{
        grid-template-columns: repeat(1, 1fr);
    }
}


@media (max-width: 767.98px) {

    .dashboard-left-box .count-wapper {
        grid-template-columns: repeat(1, 1fr);
        gap: 10px;
    }
    .dashboard-left-box .count-wapper .count-item{
        flex-direction: row !important;
        align-items: center;
    }
    .heading-bar .item{
        width: 100%;
    }
    .page-content .heading-bar .search-bar {
        max-width: 100%;
        flex-grow: 1;
    }
    .page-content .heading-bar .search-bar .input-group-text{
        width: 100%;
    }
    .page-content .change-password-wapper .form-wapper {
        max-width: 100%;
        min-width: 100%;
    }
}


@media (max-width: 575.98px) {
    .topbar{
        padding: 0 15px !important;
    }
    .topbar .select2-container--default .select2-selection--single .select2-selection__rendered{
        max-width: 100px;
    }
    .topbar  h4{
        font-size: 18px;
    }
    .page-content{
        padding: 20px 15px !important;
    }
    h4{
        font-size: 16px;
    }
    .recent-activity-box .box-bar .box{
        flex-direction: column;
        align-items: start !important;
        gap: 10px;
    }
    .fill-btn{
        padding: 7px 10px;
    }
    .heading-bar .item{
         flex-wrap: wrap;
    }
    .heading-bar .item .create-ride-btn{
        width: 100%;
        text-align: center;
    }
    .ride-details-content .caption-wapper{
        margin-top: 0;
    }
    .ride-details-content .caption-wapper .captio-box .caption-item{
        grid-template-columns: repeat(1,1fr);
    }
    .ride-details-content .caption-wapper .captio-box .caption-item .grid-item .title{
        font-size: 14px;
        margin-bottom: 2px;
    }
    .ride-details-content .caption-wapper .captio-box.driver-details-box .caption-item .grid-item{
        flex-direction: column;
        align-items: start !important;
        gap: 15px;
    }
    .action-btn-bar a,
    .action-btn-bar button{
        width: 100%;
        text-align: center;
    }
    .review-modal-block .review-box .icon-bar svg{
        max-width: 100px;
        max-height: 100px;
    }
    .review-modal-block .review-box .info {
        color: #000;
        font-size: 16px;
    }
    .review-modal-block .modal-body::after{
        height: 20%;
    }
    .page-content{
        position: fixed;
        top: 0;
        width: 100%;
        /* padding-top: 100px !important; */
        overflow-x: hidden;
        height: calc(100% - 70px);
        margin-top: 70px;
    }
    .topbar{
        z-index: 9;
        position: relative;
    }
    #customer_satisfaction_chart{
        height: 250px;
    }
    .page-content .heading-bar .search-bar{
        max-width: 80%;
    }
    .form-wapper .input-group{
        flex-wrap: nowrap;
    }
    /* .form-wapper .input-group button.translate-middle-y {
        top: -15px !important;
        transform: translateY(-50%) !important;
    } */
    .page-content .change-password-wapper{
        padding: 30px 5px;
    }
}