@media (max-width: 768px) {
    .row {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .col-sm-6 {
        width: 47%; /* Make cards take up nearly half the row width */
    }

    .card {
        height: auto;
        margin-bottom: 1rem;
    }

    .card-body {
        padding-left: 20px;
        padding-right: 20px;
    }

    .card-body .fs-25px, .card-body h5 {
        font-size: 12px !important;
        margin: 0 !important;
    }

    .card-body .fs-30px, .card-body h3 {
        font-size: 15px !important;
        margin: 0 !important;
    }

    .card-body .fs-15px, .card-body a {
        font-size: 10px !important;
        padding: 0 !important;
    }

    .card {
        height: 150px !important;
    }

    .card-img-overlay {
        padding: 0 20px 18px 0 !important;
    }

    .table-responsive {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .dx-datagrid {
        font-size: 9px !important;
        height: fit-content !important;
    }

    .dx-data-row td {
        padding: 5px 2px 5px 0 !important;
    }

    .form-caption {
        font-size: 9px !important;
        margin: 0 0 5px 0 !important;
    }

    .form-area {
        padding: 0px !important;
    }

    .mobile-form-size {
        padding: 0px !important;
    }

    /*menu*/
    .app-sidebar {
        position: fixed;
        top: 0;
        left: -250px;
        width: fit-content !important;
        height: 100%;
        background: #fff;
        z-index: 1030;
        transition: left 0.3s ease;
    }

    .app-sidebar-content {
        width: fit-content !important;
    }

    .app-sidebar.open {
        left: 0;
    }

    .app-content {
        margin-left: 0 !important;
        padding: 8px !important;
    }

    .app-sidebar-mobile-backdrop {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background-color: rgba(0,0,0,0.5);
        z-index: 1020;
    }

    .brand-logo img {
        width: 110px !important;
    }
    
    .menu-text {
        font-size: 10px;
    }

    .menu-icon i{
        font-size: 15px;
    }

    .menu-link {
        padding: 0 5px 0 5px !important;
        width: 200px;
    }

    /*login*/
    .login-left {
        width: 100% !important;
        background: white;
        height: 100px !important;
    }
    .login-right {
        width: 0% !important;
    }
    .left-header img {
        margin-left: 30% !important;
    }
    .left-body {
        width: 90% !important;
        margin-left: 25% !important;
        font-size: 10px !important;
    }
    .left-footer {
        width: 85% !important;
        font-size: 100% !important;
    }
    .left-body h3{
        font-size: 160% !important;
        margin-bottom: 0 !important;
    }
    .left-body input{
        font-size: 80% !important;
    }
    .left-body span{
        font-size: 90% !important;
    }
    .left-body button{
        font-size: 150% !important;
    }
    .form-row .label{
        margin-bottom: 50% !important;
    }


    /*cardview index*/
    .list-page-header button {
        font-size: 70% !important;
        padding: 2px !important; 
        height: 80% !important;
        min-width: 40% !important;
    }
    .list-page-header i {
        margin-right: 10% !important;
        padding-right: 0% !important;
    }
    .filter-bar {
        padding: 0 1% !important;
    }
    .filter-bar input {
        font-size: 70% !important;
    }

    /*cardview view*/
    .app{
        padding-top: 40px !important;
    }

    .card-view-icon button {
        width: 20px !important;
        height: 25px !important;
        margin-left: 10px;
        padding: 0 !important;
        padding-bottom: 0 !important;
    }
    #favoriteIcon {
        font-size: 15px !important;
        margin-left: 2px !important;
    }
    .card-view-icon span {
        font-size: 10px !important;
        height: fit-content !important;
        padding: 0 !important;
    }
    #LogoImageView {
        width: 35px !important;
        height: 35px !important;
    }
    .form-img-area {
        width: 45px !important;
        height: 45px !important;
        margin-left: 10px !important;
        padding: 4px !important;
    }
    .fs-1{
        font-size: 100% !important;
        margin-bottom: 2%;
    }
    .fw-bold {
        font-size: 70% !important;
    }
    .button-sm {
        font-size: 50% !important;
        padding: 4% !important;
        height: fit-content;
        margin: 0 2% !important;
    }

    .button-xsm {
        font-size: 35% !important;
        padding: 4% !important;
        height: fit-content;
        margin: 0 2% !important;
    }

    .size-sm {
        padding-bottom: 2% !important;
    }
    #statusDefinition {
        height: fit-content;
        width: 10px !important;
        font-size: 50% !important;
        padding: 2% !important;
        margin-left: 65% !important;
    }
    /*dev extreme*/
    .dx-list-item-content {
        font-size: 80% !important;
    }
    .dx-placeholder {
        font-size: 80% !important;
    }
    .dx-label span {
        font-size: 100% !important;
    }
    #filtersSummary{
        padding: 0 !important;
    }
    .dx-popup-content{
        padding: 5px !important;
    }
}