@media only screen and (min-width: 320px) and (max-width: 479px) {

    .phone-hide{
        display: none !important;

    }
    .phone-show{
        display: block !important;
    }
    .side-mini-panel .sidebarmenu .sidebar-nav {
  
        width: 318px;
    
    }

    .lead-box {
        width: 100%;

    }
    .custom-date-picker {
        width: 100%;

    }
    .online-lead-qoutes-box {
        width: 100%;
     
    }

    .online-lead-header-wraper {

        padding: 11px;
      
        padding-left: 17px;
    
    }

    .online-lead-qoutes-wraper.expanded {
        width: 100%;
    }
    

    .online-lead-qoutes-box.narrow {
        width: 100%;
    }

    .compare-modal {
        right: 0;
        left: 0;
        bottom: 33px;
        transform: none;
        max-width: 100%;
        top: inherit;
        width: 100%;
    }
    .compare-button {
       
        width: 100%;
  
        right: 0;
        bottom: 0;

    }
    div#modalContent {
        display: flex;
        overflow-x: scroll;
        scrollbar-width: none;
    }
    .compare-item-entry {
    
        margin-right: 10px;
        padding: 10px;
        border: 1px solid #e6e6e6;
        border-radius: 8px;
    }
    .compare-modal-top-side {

        width: 182px;
    }

    .modal.addons-covers.show .modal-dialog {
        position: absolute;
        width: 100%;
        bottom: 0;
        margin: 0;
        left: 0;
        right: 0;
    }

    .modal.addons-covers.show .modal-content {
   
        border-radius: 0;
    }

    .online-lead-qoutes-box.genrated-qoutes-motor h5 {
        font-size: 12px;
    }

    .modal.addons-covers.show .modal-body {
     
        overflow-y: scroll;
        height: 58vh;
    }



   .modal-dialog {
        position: absolute;
        width: 100%;
        bottom: 0;
        margin: 0;
        left: 0;
        right: 0;
    }

    .modal-content {
        border-radius: 12px 12px 0 0;
    }

    .view-employee-detail-cover .hstack {
        width: 100% !important;
        gap: 3px;
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        align-items: baseline;
    }

    .employee-info-links .card-body {
        display: flex;
        flex-wrap: wrap;
        padding: 20px;
        gap: 10px;
    }

    #commission_details-section .scrollable-div, .commission_details-section .scrollable-div {
        margin-bottom: 30px;
        max-height: 230px;
    }
    .breadcrumb {
     
        flex-direction: column;
    }

    .breadcrumb-item+.breadcrumb-item {
        padding-left: 0;
    }
    .wizard-content .wizard>.content>.body {
        padding: 0 3px;
    }
    .online-lead-qoutes-box.genrated-qoutes-motor h5 {
        font-size: 12px;
    }
    .modal-body {
        overflow-y: scroll;
        max-height: 58vh;
    }
    
    .car-information-section-wraper-cover {
        padding: 0px;
      
        margin-top: 21px;
        box-shadow: none;
        margin-bottom: 33px;
    }

    .col-md-4.get-qoute-button {
        margin-top: 4px;
        margin-bottom: 20px;
    }
    .online-lead-qoutes-box .dropdown ul {
        transform: translate3d(0px, 26.6667px, 0px) !important;
    }
    .online-lead-qoutes-box h6 {
        margin-bottom: 0;
        font-size: 15px;
    }

    .online-lead-qoutes-box figure {

        width: 109px;
        height: 43px;
        margin: 0 auto;
        margin-bottom: 4px;
    
    }
    .lds-ripple {
  
        width: 60%;
    
    }
    .filter-button-cover {
     
        flex-direction: column;
        align-items: flex-start;
    }

    figure.lead-header-bg-two {
        width: 13%;
      
        top: -4px;
        right: -5px;
    }
    figure.lead-header-bg-one {
        width: 9%;

        bottom: -4px;
        left: -1px;

}

.filter-button-cover h6 span {
    font-size: 11px;

}

.d-flex.justify-content-between.mb-2.common-table-button {
    float: inherit !important;

}

.card-body {

    padding: 22px;
}
.card-body h5 {
    font-size: 16px;
    margin-bottom: 0;
}

.show-more-buttons {
    padding-top: 18px;
    padding-bottom: 14px;
    justify-content: left;
}
.online-lead-header-wraper h4 {

    font-size: 15px;
}

.car-information-section-details-box {
    min-width: 100%;
}

.custom-box {
    
    padding: 0 0 9px 0px;
}

.idv-cover {
    flex-wrap: wrap;
    margin-bottom: 20px;
    gap: 10px;
}

.filter-button-cover span {
    flex-wrap: wrap;
}

.addons-applicable-cover p {
    padding: 4px 5px;
}

.not-produce-quote-box {
 width: 100%;
}

div.dataTables_wrapper div.dataTables_info {

    margin-bottom: 36px;
}

.nav-logo {

    width: 318px;

}

.brand-logo figure {
    width: 182px;

}

}





@media only screen and (min-width: 768px) and (max-width: 992px) {

    .lead-box {
        width: 31%;
      
    }

    .lead-box h6 {
        font-size: 10px;

    }
    .online-lead-qoutes-box {
        width: 30%;
     
    }
    .not-produce-quote-box {

        width: 32%;
     
    }
    .compare-modal {
   
        max-width: 88%;
        
    padding: 9px;
  
        overflow-x: scroll;
 
    }
    .compare-button {
  
        width: 23%;
    
    }

    .lds-ripple {

        width: 39%;
     
        top: calc(50% - 49.5px);
     
    }

    .compare-item-entry {
      
        min-width: 179px;
    }

    .employee-info-links .card-body {
    
        gap: 16px;
      
    }
    .view-employee-detail-cover .hstack {
        width: 48% !important;
        gap: 9px;
    }

    .brand-logo figure {
        width: 192px;
 
    }
    .tablet-show{
        display: block !important;
    }
}